@use "sass:color";

@mixin gd-menu-button {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: var(--gd-exercise-menu-font-size);

  border: 0;
  background-color: transparent;
  border-radius: var(--gd-exercise-app-border-radius);
  padding: var(--gd-exercise-container-padding);
  color: var(--gd-exercise-text-color);
  font-family: var(--gd-exercise-font-family);
  font-weight: var(--gd-exercise-menu-font-weight);
  gap: var(--gd-exercise-menu-button-gap);
  user-select: none;
  cursor: pointer;

  .material-symbols-outlined {
    position: relative;
    margin-top: -2em;
    top: 1em;
  }

  color: var(--gd-exercise-text-color);
}

@mixin gd-menu-button-cta {
  color: var(--gd-exercise-button-cta-text-color);
  font-weight: var(--gd-exercise-button-cta-font-weight);
  background-color: var(--gd-exercise-button-cta-bg-color);
  box-shadow: var(--gd-exercise-button-cta-box-shadow);
  text-transform: var(--gd-exercise-button-cta-text-transform);

  &:disabled {
    background-color: var(--gd-exercise-button-cta-bg-color-disabled);
    box-shadow: var(--gd-exercise-button-cta-box-shadow-disabled);
    cursor: default;
  }

  &:enabled:active {
    top: var(--gd-exercise-button-cta-pseudo-height);
    box-shadow: none;
  }
}

.gd-menu {
  display: grid;
  height: var(--gd-exercise-menu-height);

  grid-template-areas: "fscreen cscheme . play";
  padding-bottom: var(--gd-exercise-container-padding);

  gap: var(--gd-exercise-menu-gap);

  .gd-menu-button {
    @include gd-menu-button();

    &--cta {
      @include gd-menu-button-cta();
    }

    &--fullscreen {
      grid-area: fscreen;
    }

    &--colorschemeswitch {
      grid-area: cscheme;
    }

    &--play {
      grid-area: play;
    }
  }
}