// Name:            Toolbar
// Description:     Toolbar of website
//
// Component:       `c-toolbar`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/spacing.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 *;

// Variables
// ========================================================================

$toolbar-border-size: 2px;

// ========================================================================

.c-toolbar {

  // Custom properties
  // ========================================================================
  
  --toolbar-border-color: #{$ui-04};
  
  // ========================================================================
  
  // margin-bottom: $margin-xxsmall;
  border-bottom: $toolbar-border-size solid var(--toolbar-border-color);

  &__item {
    border-right: 1px solid var(--divider-color);

    &:first-child,
    &:last-child {
      border-right: 0;
    }

    [data-premium--product] & {
       & [data-toolbar--label-subscription] {
        display: none;
      }
      & [data-toolbar--label-upgrade] {
       display: block;
      }
   }
  [data-premium--product^='WEB_FULL'][data-premium--product$='ALL_Y'] & {
    &:has( > [data-toolbar--subscription-button]) {
      display: none;
    }
  }
    
  }

  body[data-model*="show"]:not([data-theme="today"]) &,
  body[data-model*="video"]:not([data-theme="today"]) &,
  body[data-channel*="/foto/"]:not([data-theme="today"]) &,
  body[data-channel*="/video/"]:not([data-theme="today"]) &,
  body[data-color-scheme*="dark"]:not([data-theme="today"]) & {
    --toolbar-border-color: #{rgba($ui-01, .3)};
  }

  body[data-model*="sponsor"] & {
    display: none;
  }
}