@import '@/sass/style.scss';

.MainMenu {
  @include factor-a-family;
  background-color: $mostly-black-green;
  min-height: 100%;
  overflow-y: auto;
  padding: 12px 12px 0;
  width: 100%;

  .navigation {
    height: calc(100vh - 56px - 120px);
    overflow-y: auto;

    .option,
    .option--active {
      @include margin-bottom-not-last-child(8px);

      button {
        &:disabled {
          color: $black;
          overflow: hidden;
          position: relative;

          &::after {
            background-color: rgba($black, 0.50);
            content: '';
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
          }
        }
      }

      button {
        align-items: center;
        border-radius: 10px;
        border: solid 2px $mostly-black-green;
        display: flex;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.5;
        padding: 20px;
        transition: background-color 200ms;
        width: 100%;

        svg {
          display: inline-block;
          fill: $black;
          height: auto;
          margin-right: 20px;
          width: 24px;
        }
      }
    }

    .option {
      button {
        background-color: $very-soft-green;
      }

      &:hover {
        button {
          background-color: $vivid-green;

          &:disabled {
            background-color: $very-soft-green;
          }
        }
      }
    }

    .option--active {
      button {
        background-color: $vivid-green;
      }
    }
  }

  .footer {
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    left: 50%;
    max-width: 768px;
    padding: 20px 24px 28px 16px;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;

    .footer-logo {
      height: 36px;

      svg {
        @include svg-block-by-height;
      }
    }

    .social-list {
      display: grid;
      gap: 0 8px;
      grid-template-columns: repeat(3, 36px);

      li {
        a {
          display: block;
          width: 36px;

          svg {
            @include svg-block-by-width;
          }
        }
      }
    }

    .link {
      margin-top: 16px;
      width: 100%;

      a {
        color: $soft-green;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}
