/**
 * Static preview for Tags (te-29ea3c71-c0d5-4ca8-b6d8-8e8705862e43).
 * Mirrors my-element.ts layout, overlay stacking, and hover icon swap.
 * Typography, spacing, surfaces, and shadows use General theme tokens:
 * phases-themeengine-umbraco-ui-builder/.../theme-settings-general-variables.css
 * (--primary-tags-*, --primary-hover-tags-*,
 *  --secondary-basic-tags-*, --secondary-hover-tags-*).
 */

.tags-component {
  line-height: 1;
}

.tags-component .tag-wrapper {
  line-height: 1;
  gap: 8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s ease;
}

.tags-component .tag-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
}

.tags-component .tag-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.tags-component .tag-icon-image {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  width: auto;
}

.tags-component .tag-text {
  display: inline-block;
  line-height: 1.2;
}

.tags-component .tag-icon-default,
.tags-component .tag-icon-hover {
  transition: opacity 0.2s ease;
}

/* Primary tags theme — default + hover icon swap */
.tags-component .tag-wrapper.tag-primary {
  flex-direction: var(--primary-tags-icon-position);
  width: var(--primary-tags-width-desktop);
  height: var(--primary-tags-height-desktop);
  margin-top: var(--primary-tags-spacing-margin-top-desktop);
  margin-right: var(--primary-tags-spacing-margin-right-desktop);
  margin-bottom: var(--primary-tags-spacing-margin-bottom-desktop);
  margin-left: var(--primary-tags-spacing-margin-left-desktop);
  padding-top: var(--primary-tags-spacing-padding-top-desktop);
  padding-right: var(--primary-tags-spacing-padding-right-desktop);
  padding-bottom: var(--primary-tags-spacing-padding-bottom-desktop);
  padding-left: var(--primary-tags-spacing-padding-left-desktop);
  border-top-left-radius: var(--primary-tags-radius-top-desktop);
  border-top-right-radius: var(--primary-tags-radius-right-desktop);
  border-bottom-right-radius: var(--primary-tags-radius-bottom-desktop);
  border-bottom-left-radius: var(--primary-tags-radius-left-desktop);
  background: var(--primary-tags-background-color);
  border-width: var(--primary-tags-border-width-desktop,0);
  border-style: var(--primary-tags-border-type);
  border-color: var(--primary-tags-border-color);
  box-shadow: var(--primary-tags-border-horizontal)
    var(--primary-tags-border-vertical) var(--primary-tags-border-blur)
    var(--primary-tags-border-spread) var(--primary-tags-border-shadow-color);
}

.tag-primary:hover {
  flex-direction: var(--primary-hover-tags-icon-position);
  background: var(
    --primary-hover-tags-background-color,
    var(--primary-tags-background-color)
  );
  border-width: var(
    --primary-hover-tags-border-width-desktop,
    var(--primary-tags-border-width-desktop,0)
  );

  border-style: var(
    --primary-hover-tags-border-type,
    var(--primary-tags-border-type)
  );

  border-color: var(
    --primary-hover-tags-border-color,
    var(--primary-tags-border-color)
  );
  border-top-left-radius: var(
    --primary-hover-tags-radius-top-desktop,
    var(--primary-tags-radius-top-desktop)
  );

  border-top-right-radius: var(
    --primary-hover-tags-radius-right-desktop,
    var(--primary-tags-radius-right-desktop)
  );

  border-bottom-right-radius: var(
    --primary-hover-tags-radius-bottom-desktop,
    var(--primary-tags-radius-bottom-desktop)
  );

  border-bottom-left-radius: var(
    --primary-hover-tags-radius-left-desktop,
    var(--primary-tags-radius-left-desktop)
  );
  box-shadow: var(
      --primary-hover-tags-box-shadow-horizontal,
      var(--primary-tags-border-horizontal)
    )
    var(
      --primary-hover-tags-box-shadow-vertical,
      var(--primary-tags-border-vertical)
    )
    var(--primary-hover-tags-box-shadow-blur, var(--primary-tags-border-blur))
    var(
      --primary-hover-tags-box-shadow-spread,
      var(--primary-tags-border-spread)
    )
    var(
      --primary-hover-tags-box-shadow-color,
      var(--primary-tags-border-shadow-color)
    );
}

.tag-primary .tag-text {
  color: var(--primary-tags-text-color);
  font-family: var(--primary-tags-text-font);
  font-size: var(--primary-tags-text-font-size-desktop);
  font-weight: var(--primary-tags-text-bold);
  font-style: var(--primary-tags-text-italic);
  text-decoration: var(--primary-tags-text-underline);
  letter-spacing: var(--primary-tags-text-spacing-desktop);
  line-height: var(--primary-tags-text-line-height-desktop);
}

.tag-primary:hover .tag-text {
  color: var(
    --primary-hover-tags-text-color,
    var(--primary-tags-text-font-color)
  );
  font-family: var(
    --primary-hover-tags-text-font,
    var(--primary-tags-text-font)
  );
  font-size: var(
    --primary-hover-tags-text-size-desktop,
    var(--primary-tags-text-font-size-desktop)
  );
  font-weight: var(
    --primary-hover-tags-text-bold,
    var(--primary-tags-text-bold)
  );
  font-style: var(
    --primary-hover-tags-text-italic,
    var(--primary-tags-text-italic)
  );
  text-decoration: var(
    --primary-hover-tags-text-underline,
    var(--primary-tags-text-underline)
  );
  letter-spacing: var(
    --primary-hover-tags-text-spacing-desktop,
    var(--primary-tags-text-spacing-desktop)
  );
  line-height: var(
    --primary-hover-tags-text-line-height-desktop,
    var(--primary-tags-text-line-height-desktop)
  );
}

/* Secondary tags theme — default + hover icon swap (--secondary-basic-tags-* / --secondary-hover-tags-*) */
.tag-secondary {
  flex-direction: row;
  width: var(--secondary-basic-tags-width-desktop);
  height: var(--secondary-basic-tags-height-desktop);
  margin-top: var(--secondary-basic-tags-spacing-margin-top-desktop);
  margin-right: var(--secondary-basic-tags-spacing-margin-right-desktop);
  margin-bottom: var(--secondary-basic-tags-spacing-margin-bottom-desktop);
  margin-left: var(--secondary-basic-tags-spacing-margin-left-desktop);
  padding-top: var(--secondary-basic-tags-spacing-padding-top-desktop);
  padding-right: var(--secondary-basic-tags-spacing-padding-right-desktop);
  padding-bottom: var(--secondary-basic-tags-spacing-padding-bottom-desktop);
  padding-left: var(--secondary-basic-tags-spacing-padding-left-desktop);
  border-top-left-radius: var(--secondary-basic-tags-radius-top-desktop);
  border-top-right-radius: var(--secondary-basic-tags-radius-right-desktop);
  border-bottom-right-radius: var(--secondary-basic-tags-radius-bottom-desktop);
  border-bottom-left-radius: var(--secondary-basic-tags-radius-left-desktop);
  background: var(--secondary-basic-tags-background-color);
  background-size: cover;
  background-position: var(--secondary-basic-tags-background-position, center);
  border-width: var(--secondary-basic-tags-border-width-desktop,0);
  border-style: var(--secondary-basic-tags-border-type);
  border-color: var(--secondary-basic-tags-border-color);
  box-shadow: var(--secondary-basic-tags-border-horizontal)
    var(--secondary-basic-tags-border-vertical)
    var(--secondary-basic-tags-border-blur)
    var(--secondary-basic-tags-border-spread)
    var(--secondary-basic-tags-border-shadow-color);
}

.tag-secondary:hover {
  flex-direction: row;
  background: var(
    --secondary-hover-tags-background-color,
    var(--secondary-basic-tags-background-color)
  );
  background-size: cover;
  background-position: var(
    --secondary-hover-tags-background-position,
    var(--secondary-basic-tags-background-position, center)
  );
  border-width: var(
    --secondary-hover-tags-border-width-desktop,
    var(--secondary-basic-tags-border-width-desktop,0)
  );

  border-style: var(
    --secondary-hover-tags-border-type,
    var(--secondary-basic-tags-border-type)
  );

  border-color: var(
    --secondary-hover-tags-border-color,
    var(--secondary-basic-tags-border-color)
  );
  border-top-left-radius: var(
    --secondary-hover-tags-radius-top-desktop,
    var(--secondary-basic-tags-radius-top-desktop)
  );

  border-top-right-radius: var(
    --secondary-hover-tags-radius-right-desktop,
    var(--secondary-basic-tags-radius-right-desktop)
  );

  border-bottom-right-radius: var(
    --secondary-hover-tags-radius-bottom-desktop,
    var(--secondary-basic-tags-radius-bottom-desktop)
  );

  border-bottom-left-radius: var(
    --secondary-hover-tags-radius-left-desktop,
    var(--secondary-basic-tags-radius-left-desktop)
  );
  box-shadow: var(
      --secondary-hover-tags-box-shadow-horizontal,
      var(--secondary-basic-tags-border-horizontal)
    )
    var(
      --secondary-hover-tags-box-shadow-vertical,
      var(--secondary-basic-tags-border-vertical)
    )
    var(
      --secondary-hover-tags-box-shadow-blur,
      var(--secondary-basic-tags-border-blur)
    )
    var(
      --secondary-hover-tags-box-shadow-spread,
      var(--secondary-basic-tags-border-spread)
    )
    var(
      --secondary-hover-tags-box-shadow-color,
      var(--secondary-basic-tags-border-shadow-color)
    );
}

.tag-secondary .tag-text {
  color: var(--secondary-basic-tags-text-color);
  font-family: var(--secondary-basic-tags-text-font);
  font-size: var(--secondary-basic-tags-text-size-desktop);
  font-weight: var(--secondary-basic-tags-text-bold);
  font-style: var(--secondary-basic-tags-text-italic);
  text-decoration: var(--secondary-basic-tags-text-underline);
  letter-spacing: var(--secondary-basic-tags-text-spacing-desktop);
  line-height: var(--secondary-basic-tags-text-line-height-desktop);
}

.tag-secondary:hover .tag-text {
  color: var(
    --secondary-hover-tags-text-color,
    var(--secondary-basic-tags-text-color)
  );
  font-family: var(
    --secondary-hover-tags-text-font,
    var(--secondary-basic-tags-text-font)
  );
  font-size: var(
    --secondary-hover-tags-text-size-desktop,
    var(--secondary-basic-tags-text-size-desktop)
  );
  font-weight: var(
    --secondary-hover-tags-text-bold,
    var(--secondary-basic-tags-text-bold)
  );
  font-style: var(
    --secondary-hover-tags-text-italic,
    var(--secondary-basic-tags-text-italic)
  );
  text-decoration: var(
    --secondary-hover-tags-text-underline,
    var(--secondary-basic-tags-text-underline)
  );
  letter-spacing: var(
    --secondary-hover-tags-text-spacing-desktop,
    var(--secondary-basic-tags-text-spacing-desktop)
  );
  line-height: var(
    --secondary-hover-tags-text-line-height-desktop,
    var(--secondary-basic-tags-text-line-height-desktop)
  );
}

.tags-component .tag-icon-default {
  opacity: 1;
}

.tags-component .tag-icon-hover {
  opacity: 0;
  display: none;
}

.tags-component .tag-wrapper.tag-primary:hover .tag-icon-default,
.tags-component .tag-wrapper.tag-secondary:hover .tag-icon-default,
.tags-component .tag-wrapper:hover .tag-icon-default {
  opacity: 0;
  display: none;
}

.tags-component .tag-wrapper.tag-primary:hover .tag-icon-hover,
.tags-component .tag-wrapper.tag-secondary:hover .tag-icon-hover,
.tags-component .tag-wrapper:hover .tag-icon-hover {
  opacity: 1;
  display: block;
}

.tags-component
  .tag-wrapper.tag-primary:hover:not(:has(.tag-icon-hover))
  .tag-icon-default,
.tags-component
  .tag-wrapper.tag-secondary:hover:not(:has(.tag-icon-hover))
  .tag-icon-default,
.tags-component
  .tag-wrapper:hover:not(:has(.tag-icon-hover))
  .tag-icon-default {
  opacity: 1;
  display: block;
}