/* =====================================================
    COMPONENT SHARED STYLES
   ------------------------------------------------------
*/

$el: 'tags';

$tags-item-color-border:                              var(--dlt-#{$el}-color-border-input-default, $component-color-border-input-default);
$tags-item-focus-border-color:                        var(--dlt-#{$el}-color-border-input-focus, $component-color-border-input-focus);
$tags-item-clear-color:                               var(--dlt-color-icon-interactive-secondary);
$tags-item-focus-outline-color:                       var(--dlt-#{$el}-color-border-input-focus, $component-color-border-input-focus);
$tags-item-color:                                     var(--dlt-#{$el}-color-text-default, $component-color-text-default);

$tags-item-background-color:                          var(--dlt-#{$el}-color-background-interactive-tertiary-default, $component-color-background-interactive-tertiary-default);
$tags-item-background-color-teal:                     var(--dlt-color-category-teal-subtle, #bbf1ee);
$tags-item-background-color-blue:                     var(--dlt-color-category-blue-subtle, #cde6f9);
$tags-item-background-color-purple:                   var(--dlt-color-category-purple-subtle, #e0d6ff);
$tags-item-background-color-violet:                   var(--dlt-color-category-violet-subtle, #ffd6ef);
$tags-item-background-color-red:                      var(--dlt-color-category-red-subtle, #f9e0c3);
$tags-item-background-color-yellow:                   var(--dlt-color-category-yellow-subtle, #faf3a0);
$tags-item-background-color-green:                    var(--dlt-color-category-green-subtle, #dff7ab);
$tags-item-background-color-warmgray:                 var(--dlt-color-category-warmgray-subtle, #ececdf);

/* =====================================================
    TAGS SPECIFIC VARIABLES
   ------------------------------------------------------
  */

$tags-item-padding:                                   4px;
$tags-item-margin:                                    0 var(--dlt-spacing-1-x, 0.5rem) var(--dlt-spacing-1-x, 0.5rem) 0;
$tags-item-span-margin:                               0 0 0 var(--dlt-spacing-quarter-x, 4px);
$tags-item-line-height:                               1.5;
$tags-item-border-width:                              0;
$tags-item-border-width-hover:                        2px;
$tags-item-border-style:                              var(--dlt-border-style-default, solid);
$tags-item-border-style-hover:                        var(--dlt-border-style-hover, solid);
$tags-item-border-radius:                             var(--dlt-border-radii-default, 0);
$tags-item-transition:                                $buttons-time-transition $buttons-transition-effect;
$tags-item-font-size:                                 var(--dlt-font-size-xxs, .875rem);
$tags-item-small-font-size:                           var(--dlt-font-size-xs, .875rem);
$tags-item-span-font-weight:                          var(--dlt-font-weight-regular, 400);
$tags-item-span-line-height:                          1.2;
$tags-item-clear-hover-border:                        var(--dlt-border-width-default, 1px) 
                                                      var(--dlt-border-style-default, solid) 
                                                      var(--dlt-#{$el}-color-interactive-primary-default, $component-color-primary-default);
$tags-item-clear-size:                                var(--dlt-sizing-xs, 1rem);
$tags-item-clear-margin:                              0 0 0 4px;
$tags-item-clear-hover-box-shadow:                    inset 0px 0px 0px 1px var(--dlt-#{$el}-color-interactive-primary-default, $component-color-primary-default);
$tags-item-allow-delete-font-weight:                  var(--dlt-font-weight-bold, 700);

//## Unique adjustments
$tags-item-outline-offset:                           -2px;

$tags-selectable-default-border:                      var(--dlt-color-border-interactive-subtle);
$tags-item-box-shadow:                                inset 0px 0px 0px 1px var(--dlt-#{$el}-border-input-focus, $component-color-border-input-focus);
$tags-item-focus-border:                              var(--dlt-border-width-default,  1px)
                                                      var(--dlt-border-style-default, solid)
                                                      var(--dlt-#{$el}-border-input-focus, $component-color-border-input-focus);

$tags-color-primary-active:                          var(--dlt-tags-color-interactive-primary-active, $component-color-primary-active); 

