@import "../../styles/variables.scss";

:host {
  display: grid;
  grid-template-areas: "icon input";
  grid-template-columns: 3.2rem 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  height: 3.2rem;
  background: $white;
  font-size: 1.4rem;
  border: 1px solid $light;
  border-radius: 0.2rem;
  max-width: 400px;
  min-width: 100px;
  transition: all 250ms ease-in-out;

  &[size="small"] {
    font-size: 1rem;
    height: 2.4rem;
    grid-template-columns: 2.4rem 1fr;
  }

  &[size="large"] {
    font-size: 1.8rem;
    height: 4rem;
    grid-template-columns: 4rem 1fr;
  }

  > button[theme][theme='fab'] {
    width: 2.8em;
    height: 2.8em;
    min-height: 2.8em;
  }

  > input {
    height: 100%;
    display: block;
    background: transparent;
    position: relative;
    color: var(--text-main);
    z-index: z(above);
    border: none;
    transition: all 250ms;
    backface-visibility: hidden;

    &:focus,
    &:active {
      outline: none;
    }
  }

  novo-icon {
    color: var(--text-main);
  }

  &.focused {
    border: 1px solid var(--selection);

    > novo-icon {
      color: var(--selection) !important;
    }

    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
      &[color="#{$name}"] {
        > novo-icon {
          color: $color !important;
        }
      }
    }
  }
}

header {
  novo-search.always-open:not(.focused) {
    button {
      background: rgba($white, 0.25) !important;
      color: rgba($positive, 0.25) !important;
    }
    input {
      background-color: rgba($white, 0.25) !important;
      border-color: rgba($white, 0.25) !important;
      color: rgba($positive, 0.25) !important;
      &::placeholder {
        color: $empty !important;
      }
    }
  }
}