orizens/echoes-player

@import '~src/css/core/global.scss';

@media (min-width: 320px) {
  $input-search-box-height: $input-height-base;
  $input-search-box-width: 35vw;
  $search-box-width-large: 50vw;
  $form-bg-color: $input-bg;

  player-search {
    display: flex;

    .form-search {
      position: relative;
      border: 0;
      background-color: $form-bg-color;
      border-radius: 3px;
      padding: var(--spacing-medium);

      &:focus-within input.form-control,
      input.form-control:focus {
        width: $search-box-width-large;
      }

      input.form-control {
        border: none;
        box-shadow: none;
        font-size: $input-font-size-huge;
        background-color: transparent;
        flex: 1;
        width: $input-search-box-width;
        transition: width 0.3s ease-out;
        z-index: 10;
        text-align: center;
      }
      .btn {
        padding: var(--spacing-medium) 0;
        font-size: var(--font-large);
        color: $navbar-default-link-active-color;
        z-index: 10;
      }

      .btn-submit {
        icon {
          margin-right: var(--spacing-standard);
        }
      }

      .dropdown-menu {
        box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 8px 0px;
        transform: translatey(0rem);
        max-height: none;
        background-color: white;
        opacity: 1;
        > li.active a {
          color: $inverse;
        }
        > li a {
          color: #444;
          line-height: 3;
        }
      }
    }

    .ta-results {
      top: 100%;
      left: 0;
      // transform: translateX(-50%);
      width: 100%;
      z-index: 10;
      box-shadow: 0rem 0.3rem 3rem -0.5rem rgba(0, 0, 0, 0.5);

      .ta-item {
        border-radius: 0;
        font-size: $input-font-size-huge;

        &.active {
          background-color: var(--brand-primary);
          border-color: var(--brand-primary);
        }
      }
    }

    .btn-filter {
      position: relative;
      padding: calc(var(--spacing-medium) + var(--spacing-standard))
        var(--spacing-medium);
      z-index: 1000;

      &:hover .filters {
        opacity: 1;
        transform: scale(1);
      }

      .fa-filter {
        color: var(--brand-info);
      }
    }

    .filters {
      transition: all 0.3s ease-out;
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0;
      transform: scale(0);
      background-color: white;
      padding: var(--spacing-standard);
      display: flex;
      justify-content: space-evenly;
      z-index: 9;

      .fa-trash {
        font-size: 2rem;
      }

      .filter {
        padding: 0 var(--spacing-standard);
        .form-control {
          display: none;
        }

        .form-control:checked + .filter-label {
          text-shadow: 0 0 3px var(--brand-primary);
          color: var(--brand-primary);
          cursor: pointer;
        }
      }
    }
  }
}

// @media (min-width: 460px) {
//     player-search {

//     }
// }

@media (min-width: 768px) {
  player-search {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
}