@import '../common.scss';

GameRules {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;

  &.hide {
    opacity: 0;
  }

  .control-wrap {
    background-color: darken(rgb(233, 239, 232), 35%);
    padding: 12px;
    border-radius: 4px;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    box-shadow: 2px 2px 8px black;
    overflow: visible;

    > .label {
      width: 50%;
      align-items: center;
      text-shadow: 1px 1px 1px black;
      margin: 0px;
    }
  }

  .side {
    flex-direction: row;
    flex-shrink: 0;
    width: 100%;
    gap: 12px;
    z-index: 100;

    > div {
      width: 50%;
    }
  }

  .upper-bar {
    position: absolute;
    width: 100%;
    padding-right: 32px;
    align-items: center;
    top: -32px;

    button {
      width: 135px;
      height: 50px;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      box-shadow: 2px 2px 8px black;
      text-shadow: 2px 2px black;
      font-size: 22px;

      &:hover {
        sound-in: ui_button_hover;
      }

      > i {
        font-size: 42px;
      }

      &.selected {
        background-color: darken(rgb(127, 79, 130), 35%);
      }
    }

    .close-button {
      width: 125px;
      height: 50px;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      background-color: rgb(200, 25, 0);
      box-shadow: 2px 2px 8px black;
      text-shadow: 2px 2px black;
      font-size: 22px;
      margin-right: 36px;

      &:hover {
        background-color: lighten(rgb(200, 25, 0), 25%);
        sound-in: ui_button_hover;
      }

      > i {
        font-size: 42px;
      }
    }

    .tabs {
      margin-left: 36px;
      margin-right: auto;
      gap: 24px;

      > button {
        background-color: rgb(127, 79, 130);

        &:hover {
          background-color: lighten(rgb(127, 79, 130), 35%);
        }

        &.selected {
          background-color: darken(rgb(127, 79, 130), 35%);
        }
      }
    }
  }

  .terrain-type-picker {
    flex-direction: row;
    width: 100%;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 2px 2px 8px black;

    .terrain-type-btn {
      flex-grow: 1;
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 10px 0;
      background-color: darken(rgb(233, 239, 232), 45%);
      font-size: 20px;
      text-shadow: 1px 1px black;
      border-radius: 0;
      transition: background-color 0.1s ease;

      > i {
        font-size: 28px;
      }

      &:hover {
        background-color: darken(rgb(233, 239, 232), 35%);
        sound-in: ui_button_hover;
      }

      &.selected {
        background-color: rgb(66, 118, 62);
      }
    }
  }

  .terrain-layout {
    flex-direction: row;
    width: 100%;
    gap: 16px;
    flex-grow: 1;
    overflow: visible;
  }

  .terrain-sliders {
    flex-direction: column;
    flex-shrink: 0;
    gap: 8px;
    width: 45%;
    overflow: visible;

    > *:nth-child(1)  { z-index: 20; }
    > *:nth-child(2)  { z-index: 19; }
    > *:nth-child(3)  { z-index: 18; }
    > *:nth-child(4)  { z-index: 17; }
    > *:nth-child(5)  { z-index: 16; }
    > *:nth-child(6)  { z-index: 15; }
    > *:nth-child(7)  { z-index: 14; }
  }

  .terrain-preview-column {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .settings-terrain-preview {
    width: 100%;
    aspect-ratio: 1.777;
    border: 8px $camo-darker;
  }

  .rules-title {
    left: -32px;
    padding: 8px 16px;
    background-color: rgb(66, 118, 62);
    margin-bottom: 8px;
    transform: skewX(-4px);
    box-shadow: 2px 2px 8px black;
    z-index: 10;

    > label {
      font-size: 48px;
      transform: skewX(4px);
      text-shadow: 2px 2px black;
    }
  }

  .scrollable {
    overflow: scroll;
    flex-direction: column;
    gap: 12px;
    margin-top: 64px;
    padding-bottom: 32px;
    width: 100%;
    flex-grow: 1;

    &.terrain-tab {
      overflow: visible;
    }
  }

  .rules-container {
    position: absolute;
    flex-direction: column;
    width: 1400px;
    height: 800px;
    padding: 0 32px;
    border-radius: 8px;
    background-color: rgb(233, 239, 232);
  }
}