@use '../../abstracts/header';
@use '../../abstracts/if_screen' as *;
@use '../../abstracts/sidebar_wrapper_chrome' as *;
@use '../../abstracts/variables' as *;
@use '../../vendors/fortawesome-fontawesome/mixins' as fa;

.sidebar-left {
  @include sidebar_wrapper_chrome;
  background: var(--sidebar-left-bg);
  border-right: var(--sidebar-left-border);
  width: var(--sidebar-left-width);
  left: 0;

  &, a {
    color: var(--sidebar-left-text);
  }

  .select-field__options a {
    color: var(--input-color);
  }

  @include if_screen(">two-columns") {
    padding-right: calc(var(--gutter) * 2);
  }

  @include if_screen("<=two-columns") {
    top: 3rem; // TODO: Should be a dynamic value
    right: 0;
    left: auto;
  }

  h2 {
    font-size: var(--h1-font-size);
    margin: 0;

    .btn-hallow {
      font-size: 1.4rem;
      position: absolute;
      right: 0;
    }
  }

  .participants-heading {
    display: none;
  }
}

body.for-cms .sidebar-left {
  display: none !important;
}

.sidebar-left__nav a {
  position: relative;
  outline: 2px solid transparent;

  &.is-frozen {
    color: var(--sidebar-left-frozen-color);
  }

  &:focus,
  &:hover {
    background: var(--sidebar-left-search-focus-bg);
  }

  &:focus {
    outline: 0;
    box-shadow: var(--focus-outline);
    z-index: 1;
  }

  &.has-path {
    background: var(--sidebar-left-search-focus-bg);
    font-style: inherit;

    .badge {
      display: none;
    }
  }

  &.has-focus {
    background: var(--sidebar-left-search-focus-bg);
  }
}

.sidebar-left__nav .fas {
  text-align: center;
  width: $sidebar-item-icon-width;
}

.sidebar-left__nav.is-filtering {
  a.has-path {
    background: transparent;
  }

  a.has-focus {
    background: var(--sidebar-left-search-focus-bg);
  }
}

.sidebar-header {
  @include header.site;
  border-bottom: 2px solid transparent;

  @include if_screen("<=one-column") {
    display: none;
  }

  h2 {
    flex: 1 0 0;
  }

  input {
    background: transparent;
    border: 0;
    width: 70%; // Make sure it does not take up too much space
    max-width: 76%;
    padding: 0;
    width: 100%;
    line-height: 1.25;
    height: 1.25;
    flex: 1 0 0;
    transition: max-width 0.3s ease-in;

    &,
    &::placeholder {
      color: var(--sidebar-left-text);
    }

    &::-moz-placeholder {
      opacity: 1; // Fix faded color
    }

    &:focus {
      outline: 0;

      &::placeholder {
        color: var(--sidebar-left-search-placeholder-color);
      }
    }
  }

  .fa-search {
    -webkit-text-stroke: 1px var(--sidebar-left-bg);
  }

  .for-notifications {
    width: 1.6rem;
    min-width: auto;
    left: 0.6rem;
    transition: all 0.2s ease-in;
  }

  &.has-focus {
    border-bottom-color: var(--sidebar-left-text);

    input {
      max-width: 100%;
    }

    .for-notifications {
      width: 0;
      opacity: 0;
      transform: scale(0.1);
    }
  }
}
