@use 'sass:math';

@import "ContextMenu";
@import "Markdown";
@import "mobile";
@import "Table";
@import "Toggle";
@import "variables";

$tab-bar-height: 30px + math.div($ui-margin, 2);
$tab-width: 625px;
$button-width: 160px;
$label-size: 14px;
$segment-icon-size: 19px;

$mobile-game-icon-size: 100px;
$small-font-size: 13px;
$small-button-padding: 1px 3px 1px 3px;

.run-editor {
  @include context-menu;
  @include markdown;
  @include table;
  @include toggle;

  thead.table-header {
    border-bottom: solid 1px $border-color;
  }

  .table-header {
    >tr>th {
      font-weight: bold;
      text-align: center;
    }

    >tr>th:nth-child(1):after {
      margin: 0;
      margin-left: -4px;
      margin-right: 7px;
    }
  }

  .table>.table-header>tr {
    display: table-row;
    background: $header-row-color;

    >th {
      padding: math.div($ui-margin, 2) math.div($ui-margin, 2);
      display: table-cell;

      &:first-child {
        padding-left: $ui-margin;
      }

      &:last-child {
        padding-right: $ui-margin;
      }
    }
  }

  .run-editor-additional-info {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    background-color: $light-row-color;
    width: $tab-width;

    .run-editor-rules {
      padding-left: $ui-margin;
      padding-right: $ui-margin;
      border: 1px solid $border-color;
      border-collapse: collapse;
    }
  }

  .run-editor-tab {
    margin-left: math.div($ui-large-margin, 2);
    min-width: $tab-width;
    box-sizing: border-box;

    .settings-table {
      width: 100%;
    }

    @include mobile {
      width: 100%;
      min-width: 0;
      margin-left: 0;
    }
  }

  .video-outer-container {
    width: 100%;
    padding-top: calc(100% * 9 / 16);
    margin-top: math.div($ui-margin, 2);
    position: relative;

    .video-inner-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;

      iframe {
        width: 100%;
        height: 100%
      }
    }
  }

  .run-editor-info {
    display: inline-flex;
    align-items: flex-start;
    margin-bottom: $ui-large-margin - math.div($ui-margin, 2);

    .game-icon-container {
      background-color: $light-row-color;
      border: 1px solid $border-color;
      cursor: pointer;
      box-sizing: border-box;
      width: $button-width;
      height: $button-width;
      padding: $ui-margin;

      .game-icon-image {
        object-fit: contain;
        width: $button-width - 2 * $ui-margin;
        height: $button-width - 2 * $ui-margin;

        @include mobile {
          width: $mobile-game-icon-size - 2 * $ui-margin;
          height: $mobile-game-icon-size - 2 * $ui-margin;
        }
      }

      @include mobile {
        width: $mobile-game-icon-size;
        height: $mobile-game-icon-size;
        flex-shrink: 0;
      }
    }

    .run-editor-info-table {
      margin-left: $ui-large-margin;
      width: $tab-width;
      display: flex;
      flex-wrap: wrap;

      .info-table-row {
        flex-grow: 1;
        width: 100%;
        display: flex;

        .info-table-cell {
          padding: 0 $ui-margin $ui-margin 0;
          flex-grow: 1;
        }

        .info-table-cell:last-child {
          padding-right: 0;

          @include mobile {
            padding-right: $ui-margin;
          }
        }

        @include mobile {
          flex-wrap: wrap;
        }
      }

      .info-table-row:last-child .info-table-cell {
        padding-bottom: 0;

        @include mobile {
          padding-bottom: $ui-margin;
        }
      }

      @include mobile {
        width: 100%;
        margin-left: $ui-margin;
        margin-bottom: $ui-large-margin - $ui-margin;
      }
    }

    @include mobile {
      margin: $ui-margin 0 0 $ui-margin;
    }
  }

  table.run-editor-table {
    .number {
      font-family: inherit;
    }

    td {
      overflow: hidden;

      >input {
        width: 100%;
        text-overflow: ellipsis;

        @include mobile {
          font-size: $small-font-size;
        }
      }

      &.segment-icon-container {
        width: $segment-icon-size;
        cursor: pointer;

        div {
          height: $segment-icon-size;

          .segment-icon {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }

    @include mobile {
      font-size: $small-font-size;
    }
  }

  .bottom-section {
    display: flex;
    flex-wrap: wrap;

    .editor-group {
      .tab-bar {
        margin-left: math.div($ui-large-margin, 2);
        height: $tab-bar-height;

        @include mobile {
          height: inherit;
          margin-left: 0;

          button {
            font-size: $small-font-size;
            padding: $small-button-padding;
            margin-top: 0;
          }
        }
      }

      @include mobile {
        min-width: 100%;
        margin-top: $ui-large-margin - $ui-margin;
      }
    }

    @include mobile {
      .side-buttons {
        width: 100%;
      }
    }
  }

  .btn-group {
    display: flex;
    flex-direction: column;
    margin-top: $tab-bar-height;
    margin-right: math.div($ui-large-margin, 2);
    width: $button-width;

    button {
      font-size: 15px;
      width: $button-width;
      margin-right: 0;
      min-height: 30px;

      @include mobile {
        margin-top: 0;
        margin-bottom: $ui-margin;
        margin-right: $ui-margin;
        width: calc(50% - #{$ui-margin})
      }
    }

    button:nth-child(1) {
      margin-top: 0;
    }

    @include mobile {
      width: calc(100% - #{$ui-margin});
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 0;
      margin-left: $ui-margin;
    }
  }

  .best-segment-time {
    color: hsla(50, 100%, 50%, 1);
  }

  .leaderboard-table {
    .leaderboard-row:hover {
      background: $hover-row-color !important;
    }

    .leaderboard-rank-column,
    .splits-download-column {
      width: 36px;
    }

    .leaderboard-time-column,
    .variable-column {
      width: 100px;
    }

    .variable-column,
    .splits-download-column {
      text-align: center;
    }

    .leaderboard-expanded-row {
      &>td {
        max-width: 0;
      }

      .run-meta-table {
        border-spacing: $ui-margin 2px;
        margin-left: -$ui-margin;
      }
    }

    .unregistered-user {
      font-style: italic;
      color: silver;
    }

    @include mobile {
      font-size: $small-font-size;
    }
  }

  .group {
    position: relative;
    border-bottom: 1px solid $border-color;

    >input {
      font-size: 18px;
      padding: $label-size+$ui-margin 0 math.div($ui-margin, 2) math.div($ui-margin, 2);
      display: block;
      width: 100%;
      border: none;
      background: transparent;
      color: white;
      font-family: "fira", sans-serif;
    }

    >input:focus {
      outline: none;
    }

    >label {
      color: hsla(50, 0%, 75%, 1);
      font-size: $label-size;
      font-weight: normal;
      position: absolute;
      pointer-events: none;
      left: math.div($ui-margin, 2);
      top: 0;
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
    }

    >input:focus~label {
      color: hsla(50, 100%, 50%, 1);
    }

    &.invalid>input:focus~label {
      color: hsla(0, 100%, 50%, 1);
    }

    >.bar {
      position: relative;
      display: block;
      width: 100%;
    }

    >.bar:before,
    >.bar:after {
      content: "";
      height: 2px;
      width: 0;
      bottom: 0;
      position: absolute;
      background: hsla(50, 100%, 50%, 1);
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
    }

    >.bar:before {
      left: 50%;
    }

    >.bar:after {
      right: 50%;
    }

    &.invalid>.bar:before,
    &.invalid>.bar:after {
      background: hsla(0, 100%, 50%, 1);
    }

    >input:focus~.bar:before,
    >input:focus~.bar:after {
      width: 50%;
    }
  }

  .filter-table {
    margin-top: math.div($ui-margin, 2);
    margin-bottom: math.div($ui-margin, 2);
    width: 100%;

    &.table {
      td {
        padding: math.div($ui-margin, 2) $ui-margin;
      }

      tr:first-child>td {
        padding-top: $ui-margin;
      }

      tr:last-child>td {
        padding-bottom: $ui-margin;
      }

      >tbody.table-body>tr {
        background-color: $light-row-color;
      }

      >thead.table-header>tr {
        background-color: $header-row-color;
      }

      &.subcategory-table {
        >tbody>tr {
          border: 1px solid $border-color;
          text-align: center;
          cursor: pointer;
        }

        tr:first-child>td {
          padding-top: math.div($ui-margin, 2);
        }

        tr:last-child>td {
          padding-bottom: math.div($ui-margin, 2);
        }

        >tbody.table-body>tr {
          >td:hover {
            background: $hover-row-color;
          }

          >td.selected:hover {
            background: $selected-row-hover-color !important;
          }
        }
      }
    }

    @include mobile {
      margin: 0 0 $ui-margin (
        -$ui-margin
      );
    width: calc(100% + #{$ui-margin});
  }
}
}
