@import "variables";

.github-Blank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;

  &-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &-footer {
    flex-shrink: 0;
    padding: @component-padding*2 @component-padding;
  }

  &-LargeIcon:before {
    margin-right: 0;
    margin-top: @component-padding * 5;
    margin-bottom: @component-padding * 5;
    width: auto;
    height: auto;
    font-size: 8em;
    color: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
  }

  &-banner, &-context , &-explanation , &-LargeIcon {
    text-align: center;
  }

  &-option {
    display: flex;
    flex-direction: row;
    align-items: center;

    &--explained {
      margin-bottom: @component-padding/2;
    }
  }

  &-actionBtn {
    flex: 1;
    margin: 0 10%;
  }

  &-explanation {
    margin-left: 5%;
    margin-right: 5%;
    color: @text-color-subtle;
  }

  &-tabLink {
    margin-left: 0.5em;
    border-color: inherit;
    background-color: inherit;
    border-style: none;
    border-width: 0;
    padding: 0;
    text-decoration: underline;

    .icon {
      padding-right: 0;
    }
  }
}