// Name:            searchbar
// Description:     searchbar of website
//
// Component:       `c-searchbar`
//
// Dependencies:    `settings/v7/colors.tokens`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-searchbar {

  // Custom properties
  // ========================================================================
  
  --searchbar-background: var(--theme-color);
  animation: showitem .3s ease-in-out;
  // ========================================================================


  background-color: var(--searchbar-background);
  @include bp(md) {
    --searchbar-background: #{$ui-05};
  }
  @keyframes showitem {
    from {
      opacity: 0;
    }
    
    to {
      opacity: 1;
    }
  }

  [data-color-scheme*="dark"] &{
    @include bp(md) {
      --searchbar-background: #{$ui-07};
    }
  }

  .c-header--inverse & {
    --searchbar-background: var(--background-color);
  }
}