@import '../../styles/responsive';

.scoutbarStemInner {
  transition: all 0.2s ease-in-out;
}

.scoutbarStem {
  --default-focus: #898989;
  --deduct-height: 50vh;

  border-top: 1px solid var(--scout-light-grey);
  padding: 10px;
  transition: all 0.2s ease-in;
  min-height: 20px;
  max-height: var(--deduct-height);
  overflow-y: auto;

  scrollbar-width: thin;
  scrollbar-color: var(--scout-light-grey) transparent;

  &.emptyResults {
    padding: 0px;
    min-height: 0;
    border-top: 0px solid transparent;
  }

  @include respond-below(sm) {
    max-height: calc(100% - 96px);
    min-height: 86vh;
  }

  &:hover {
    &::-webkit-scrollbar {
      width: 9px;
    }
  }

  &::-webkit-scrollbar-thumb {
    background: var(--scout-theme-grey);
    border-radius: 50px;

    &:hover {
      background: var(--scout-tutorial-grey);
    }
  }

  /* Works on Chrome, Edge, and Safari */
  &::-webkit-scrollbar {
    width: 0px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  .recentSearch {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 8px;

    .recentCell {
      border-radius: 8px;
      margin-right: 5px;
      min-width: 25%;
      padding: 0px 10px;
      animation: slideInLeft 0.2s ease-in-out;
      position: relative;
      display: flex;
      margin-bottom: 4px;
      box-sizing: border-box;

      @include respond-below(sm) {
        min-width: 100%;
      }

      &:hover,
      &:focus-within {
        background: var(--scout-theme-card-hover);
        .recentCloseIcon {
          visibility: visible;
          path {
            fill: var(--scout-brand-primary);
          }
        }
      }

      &:focus-within {
        border: 1px solid var(--scout-brand-primary);
      }

      .clock,
      .more {
        margin-right: 8px;
        width: 20px;
        height: auto;
        opacity: 0.7;
      }

      .clock {
        path {
          stroke: var(--scout-theme-black);
          fill: none;
        }
      }

      .more {
        path {
          fill: var(--scout-theme-black);
        }
      }

      .recentButton {
        background: transparent;
        border: none;
        padding: 14px 14px 14px 0px;
        text-align: left;
        font-size: 14px;
        outline: none;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 152px;

        color: var(--scout-theme-black);
        @include respond-below(sm) {
          width: 270px;
        }
      }

      .recentCloseIcon {
        position: absolute;
        right: 11px;
        visibility: hidden;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: var(--scout-theme-card-hover);

        @include respond-below(sm) {
          visibility: visible;
        }

        svg {
          width: 17px;
          height: auto;
          path {
            fill: var(--scout-theme-grey);
          }
        }
      }
    }
  }

  .scoutbarStemCell {
    padding: 15px;
    width: 100%;
    border-radius: 8px;
    text-align: left;
    background: transparent;
    border: none;
    font-size: 0.95rem;
    margin-bottom: 3px;
    font-weight: 400;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.1s ease;
    will-change: border-color;
    align-items: center;
    text-decoration: none;
    display: flex;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    color: var(--scout-theme-black);
    position: relative;
    animation: slideInLeft 0.2s ease-in-out;

    &:global([data-scoutbar-active='true']) {
      pointer-events: none;
      p .shortcut,
      .newPageIcon {
        visibility: hidden;
      }
    }

    svg,
    img {
      width: 35px;
      height: 35px;
      object-fit: contain;
      object-position: center;
      display: block;
      margin-right: auto;

      @include respond-below(sm) {
        margin-right: 8px;
      }
    }

    p {
      margin-bottom: 0px;
      display: block;
      margin-top: 0;
      flex: 0 0 92.5%;
      max-width: 92.5%;

      span {
        display: block;
      }

      .description {
        margin-top: 6px;
        opacity: 0.45;
        font-size: 0.813rem;
      }

      .shortcut,
      .newPageIcon {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        visibility: hidden;
        opacity: 0.7;

        transition: all 0.2s ease-in-out;
      }

      .shortcut {
        display: flex;
        span {
          height: 20px;
          min-width: 20px;
          opacity: 1;
          padding: 0px 5px;
          align-items: center;
          margin: 0 7px 0 0;
          justify-content: center;
          display: flex;
          line-height: 0;
          font-weight: bold;
          font-family: monospace;
          box-shadow: var(--scout-theme-keyboard);
          border-radius: 4px;
          background: var(--scout-tutorial-grey);
          color: var(--scout-white);
        }
      }

      .newPageIcon {
        height: auto;
        width: 20px;

        path {
          fill: var(--scout-tutorial-grey);
        }
      }
    }

    &:disabled {
      opacity: 0.4;
      color: var(--scout-theme-black);
      cursor: not-allowed;
    }

    &:focus,
    &.active {
      background: var(--scout-theme-card-hover);

      p .shortcut,
      .newPageIcon {
        visibility: visible;
      }
    }

    &:focus {
      outline: none;
      border: 1px solid var(--scout-brand-primary, var(--default-focus));
    }
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(0px);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.scoutbarSection {
  p.header {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    margin: 15px 0px 8px 2px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.688rem;
    color: var(--scout-theme-black);
    letter-spacing: 0.8px;
    opacity: 0.4;
    width: fit-content;
    border-radius: 8px;
    padding: 0px 8px;
    animation: slideInLeft 0.2s ease-in-out;
  }
}
