@use 'sass:math';

@import 'Toggle';
@import 'variables';

$h1-font-size: 24px;
$h2-font-size: 22px;

.sidebar-overlay {
  z-index: 3 !important;
}

.sidebar {
  background: $sidebar-background-color;
  padding: $ui-margin;
  width: 250px;
  z-index: 4 !important;

  @include toggle;

  >div>div.small {
    display: flex;

    >button {
      width: 50%;
      font-size: 18px;
    }
  }

  .sidebar-buttons {
    hr {
      border-color: $border-color;
      margin: ($ui-large-margin - math.div($ui-margin, 2)) 0;

      &.livesplit-title-separator {
        margin-top: 0;
      }
    }

    h1,
    h2 {
      text-align: center;
      margin-top: $ui-large-margin;
      margin-bottom: $ui-large-margin;
    }

    h1 {
      font-size: $h1-font-size;
    }

    h2 {
      font-size: $h2-font-size;
      margin-bottom: $ui-margin;
    }

    >button {
      width: 100%;
    }

    .livesplit-title {
      display: flex;
      justify-content: center;
      align-items: center;

      .livesplit-icon {
        height: 40px;
        margin-right: $ui-margin;

        img {
          height: 100%;
        }
      }
    }

    .modified-icon {
      position: absolute;
      font-size: 10px;
      padding-left: 5px;
    }
  }

  .choose-comparison {
    margin-bottom: math.div($ui-margin, 2);
    padding: 0 6px 0 6px;
    width: 100%;
    height: 40px;
    appearance: none;
    background: $button-middle-color;
    border: 1px solid $border-color;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-family: "fira", sans-serif;
    font-size: 20px;
    text-align: center;
    text-overflow: ellipsis;
  }
}
