// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@import "refactor/common-refactor.scss";

.shortcuts {
  display: grid;
  grid-template-rows: auto auto 1fr;
  // TODO: Fix this once we start implementing the DS.
  //       We should not be doign these hardcoded calc's.
  height: calc(100vh - #{$s-60});
}

.search-field {
  display: flex;
  align-items: center;
  height: $s-32;
  margin: $s-16 $s-12 $s-4 $s-12;
  border-radius: $br-8;
  font-family: "worksans", sans-serif;
  background-color: var(--color-background-tertiary);
  .search-box {
    align-items: center;
    display: flex;
    width: 100%;

    .icon-wrapper {
      display: flex;
      svg {
        @extend .button-icon-small;
        stroke: var(--icon-foreground);
      }
    }

    .input-text {
      @include removeInputStyle;
      height: $s-32;
      width: 100%;
      margin: 0;
      padding: $s-4;
      border: 0;
      font-size: $fs-12;
      color: var(--color-foreground-primary);
      &::placeholder {
        color: var(--color-foreground-secondary);
      }
      &:focus-visible {
        border-color: var(--color-accent-primary-muted);
      }
    }
    .clear-btn {
      @include buttonStyle;
      @include flexCenter;
      height: $s-16;
      width: $s-16;
      .clear-icon {
        @include flexCenter;
        svg {
          @extend .button-icon-small;
          stroke: var(--icon-foreground);
        }
      }
    }
  }
  .search-icon {
    @include flexCenter;
    width: $s-28;
    svg {
      @extend .button-icon-small;
      stroke: var(--icon-foreground);
    }
  }
}

.shortcuts-header {
  @include flexCenter;
  @include uppercaseTitleTipography;
  position: relative;
  height: $s-32;
  padding: $s-2 $s-2 $s-2 0;
  margin: $s-4 $s-4 0 $s-4;
  border-radius: $br-6;
  background-color: var(--panel-title-background-color);

  .shortcuts-title {
    @include flexCenter;
    flex-grow: 1;
    color: var(--title-foreground-color-hover);
  }

  .shortcuts-close-button {
    @extend .button-tertiary;
    position: absolute;
    right: $s-2;
    top: $s-2;
    height: $s-28;
    width: $s-28;
    border-radius: $br-5;

    svg {
      @extend .button-icon;
      stroke: var(--icon-foreground);
    }
  }
}

.section {
  margin: 0;
}

.not-found {
  @include bodySmallTypography;
  color: var(--empty-message-foreground-color);
  margin: $s-12;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: $s-12;
  overflow-y: scroll;
  font-size: $fs-12;
  color: var(--title-foreground-color);

  .section-title,
  .subsection-title {
    @include uppercaseTitleTipography;
    display: flex;
    align-items: center;
    margin: 0;
    padding: $s-8 0;
    cursor: pointer;

    .collapsed-shortcuts {
      @include flexCenter;
      svg {
        @extend .button-icon-small;
        stroke: var(--icon-foreground);
      }
      &.open {
        transform: rotate(90deg);
      }
    }
    .subsection-name,
    .section-name {
      padding-left: $s-4;
    }
    &:hover {
      color: var(--title-foreground-color-hover);
      .collapsed-shortcuts {
        svg {
          stroke: var(--title-foreground-color-hover);
        }
      }
    }
  }

  .subsection-title {
    text-transform: none;
    padding-left: $s-12;
  }
  .subsection-menu {
    margin-bottom: $s-4;
  }
  .sub-menu {
    margin-bottom: $s-4;

    .shortcuts-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: $s-32;
      padding: $s-6;
      margin-bottom: $s-4;
      border-radius: $br-8;
      background-color: var(--pill-background-color);

      .command-name {
        @include bodySmallTypography;
        margin-left: $s-2;
        color: var(--pill-foreground-color);
      }
      .keys {
        @include flexCenter;
        gap: $s-2;
        color: var(--pill-foreground-color);

        .key {
          @include bodySmallTypography;
          @include flexCenter;
          text-transform: capitalize;
          height: $s-20;
          padding: $s-2 $s-6;
          border-radius: $s-6;
          background-color: var(--menu-shortcut-background-color);
        }
        .space {
          margin: 0 $s-2;
        }
      }
    }
  }
}
