.menu {
  display: flex;
  justify-content: space-between;

  &__left {
    display: flex;
    gap: 10px;
  }

  &__right {
    display: flex;
    gap: 10px;
  }

  &__button {
    width: 80px;
    height: 80px;
    border: none;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    cursor: pointer;
    background: linear-gradient(145deg, #f0f0f0, #ffffff);
    box-shadow:
      10px 20px 30px rgba(217, 217, 217, 0.47),
      -0px -20px 60px #ffffff;
    transition:
      0.15s ease-in-out background-color,
      0.15s ease-in-out box-shadow;

    &:focus {
      outline: none;
    }

    &:hover {
      background: linear-gradient(145deg, #f0f0f0, #ffffff);
      box-shadow:
        10px 20px 30px rgba(188, 188, 188, 0.47),
        -0px -20px 60px #ffffff;
    }

    &:disabled {
      pointer-events: none;
      opacity: 0.5;
      background: linear-gradient(145deg, #f0f0f0, #ffffff);
      box-shadow: 10px 20px 30px rgba(188, 188, 188, 0.3);

      .menu__button-icon {
        color: #bcbcbc;
      }
    }
  }

  &__button-icon {
    color: #4c7ee7;
    margin-bottom: 5px;
  }

  &__button-name {
    font-size: 12px;
    font-weight: 500;
  }

  &--dark {
    .menu__button {
      background: #303030;
      box-shadow:
        20px 20px 60px #292929,
        -20px -20px 60px #303030;

      &:hover {
        background: #292929;
        box-shadow:
          20px 20px 60px #292929,
          -20px -20px 60px #3f3f3f;
      }

      &:disabled {
        pointer-events: none;
        opacity: 0.5;
        background: linear-gradient(145deg, #2b2b2b, #3a3a3a);
        box-shadow: 10px 20px 30px rgba(43, 43, 43, 0.3);

        .menu__button-icon {
          color: #b1b1b1;
        }

        .menu__button-name {
          color: #b1b1b1;
        }
      }
    }

    .menu__button-icon {
      color: #007bff;
    }

    .menu__button-name {
      color: #fff;
    }
  }
}
