/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '@material/theme/theme' as mdc-theme;
@use '@material/theme/theme-color' as mdc-theme-color;
@use '../../theme';
@use './variables';

@mixin provide-theme($theme) {
  @include theme.theme-properties(app-bar-search, $theme, variables.$theme-values);
}

@mixin core-styles() {
  ::slotted([slot=action]) {
    margin-left: 8px;
  }
  
  .forge-app-bar-search {
    @include base;
  
    &__container {
      @include container;
  
      ::slotted(input) {
        @include input;
      }
    }
    
    &__global-icon-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 16px;
    }
  
    &__search-icon-container {
      @include icon-container;
    }
  
    &__icon {
      @include icon;
    }
  
    &__actions {
      @include actions;
    }
  
    &__context {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 8px;
  
      &-button {
        @include mdc-theme.property(color, on-surface);
  
        outline: none;
        border: none;
        background: none;
        min-width: 100px;
        display: flex;
        align-items: center;
        height: 70%;
        margin-left: 8px;
        margin-right: 4px;
        border-radius: 4px;
        background-color: transparent;
        transition: background-color 200ms ease-out;
        will-change: background-color;
        padding: 0;
        padding-left: 8px;
  
        &:hover {
          background-color: rgba(255, 255, 255, 0.12);
        }
  
        &:focus {
          background-color: rgba(255, 255, 255, 0.2);
        }
  
        &-text {
          flex: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  
    &__vertical-divider {
      @include mdc-theme.property(border-left-color, on-primary);
  
      display: inline-block;
      position: absolute;
      top: 8px;
      bottom: 8px;
      border-left-width: 1px;
      border-left-style: solid;
    }
  
    &--focused {
      .forge-app-bar-search__container {
        @include theme.css-custom-property(background-color, --forge-app-bar-search-theme-background-focused, variables.$background-focused);
  
        &::before {
          opacity: 0.87;
          border-width: 2px;
          top: -1px;
          right: -1px;
          bottom: -1px;
          left: -1px;
        }
      }
    }
  
    &--disabled {
      @include theme.css-custom-property(opacity, --forge-app-bar-search-theme-disabled-opacity, variables.$disabled-opacity);
      
      cursor: not-allowed;
  
      .forge-app-bar-search__container {
        &:hover::before {
          opacity: 54%;
        }
      }
      
      ::slotted(input) {
        cursor: not-allowed;
      }
    }
  }
}

@mixin host() {
  display: block;
  width: 100%;
  contain: layout style;
}

@mixin base() {
  display: flex;
  height: 2.25rem;
}

@mixin container() {
  @include theme.css-custom-property(background-color, --forge-app-bar-search-theme-background, variables.$background);
  
  width: 100%;
  flex: 1 1 auto;
  margin: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;

  &::before {
    @include mdc-theme.property(border-color, on-primary);

    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    z-index: -1;
    opacity: 0.54;
    transition-property: border-color, opacity;
    transition-duration: variables.$transition-duration;
    transition-timing-function: variables.$timing-function;
    will-change: border-color, border-width, opacity, top, left, bottom, right;
  }

  &:hover::before {
    @include theme.css-custom-property(opacity, --forge-app-bar-search-theme-hover-opacity, variables.$hover-opacity);
  }
}

@mixin icon-container() {
  width: 56px;
  height: variables.$height;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

@mixin icon() {
  @include mdc-theme.property(color, on-primary);
}

@mixin input() {
  @include mdc-theme.property(color, on-primary);

  display: block;
  overflow: hidden;
  background: none;
  border: none;
  font-size: 1rem;
  flex: 1 1 auto;
  margin: 0;
  margin-left: -8px;
  outline: none;
  pointer-events: auto;
  transition-property: color;
  transition-duration: variables.$transition-duration;
  transition-timing-function: variables.$timing-function;

  &::placeholder {
    @include mdc-theme.property(color, text-secondary-on-background);
    
    font-size: 1rem;
    opacity: 1;
  }
}

@mixin actions() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Use this mixin to generate classes for creating your own custom input containers.
@mixin custom-input-classes() {
  .forge-app-bar-input {
    @include input;

    &__container {
      @include container;

      padding: 8px 16px;
    }
  }
}
