/**
 * Static preview styles for Icon Primary (te-263776ed-5a6d-4352-9d7d-fa749e2242bd).
 * Mirrors my-element.ts layout, transitions, and hover image swap.
 * Uses General theme icon tokens: primary, secondary, tertiary (builder design template).
 */
.icon-primary {
  line-height: 0;
}

.icon-primary .icon-wrapper-primary {
  line-height: 0;
  width: var(--primary-icons-width-desktop, 44px);
  height: var(--primary-icons-height-desktop, 44px);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s ease;
  margin-top: var(--primary-icons-spacing-margin-top-desktop);
  margin-right: var(--primary-icons-spacing-margin-right-desktop);
  margin-bottom: var(--primary-icons-spacing-margin-bottom-desktop);
  margin-left: var(--primary-icons-spacing-margin-left-desktop);
  padding-top: var(--primary-icons-spacing-padding-top-desktop);
  padding-right: var(--primary-icons-spacing-padding-right-desktop);
  padding-bottom: var(--primary-icons-spacing-padding-bottom-desktop);
  padding-left: var(--primary-icons-spacing-padding-left-desktop);
  border-top-left-radius: var(--primary-icons-radius-top-desktop);
  border-top-right-radius: var(--primary-icons-radius-right-desktop);
  border-bottom-right-radius: var(--primary-icons-radius-bottom-desktop);
  border-bottom-left-radius: var(--primary-icons-radius-left-desktop);
  background: var(--primary-icons-background-color);
  border-width: var(--primary-icons-border-width-desktop,0);
  border-style: var(--primary-icons-border-type);
  border-color: var(--primary-icons-border-color);
  box-shadow: var(--primary-icons-border-horizontal)
    var(--primary-icons-border-vertical) var(--primary-icons-border-blur)
    var(--primary-icons-border-spread) var(--primary-icons-border-shadow-color);
}

.icon-primary .icon-wrapper-primary:hover {
  background: var(
    --primary-hover-icons-background-color,
    var(--primary-icons-background-color)
  );
  border-width: var(
    --primary-hover-icons-border-width-desktop,
    var(--primary-icons-border-width-desktop,0)
  );

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

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

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

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

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

.icon-primary .icon-wrapper-secondary {
  line-height: 0;
  width: var(--secondary-basic-icons-width-desktop, 44px);
  height: var(--secondary-basic-icons-height-desktop, 44px);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s ease;
  margin-top: var(--secondary-basic-icons-spacing-margin-top-desktop);
  margin-right: var(--secondary-basic-icons-spacing-margin-right-desktop);
  margin-bottom: var(--secondary-basic-icons-spacing-margin-bottom-desktop);
  margin-left: var(--secondary-basic-icons-spacing-margin-left-desktop);
  padding-top: var(--secondary-basic-icons-spacing-padding-top-desktop);
  padding-right: var(--secondary-basic-icons-spacing-padding-right-desktop);
  padding-bottom: var(--secondary-basic-icons-spacing-padding-bottom-desktop);
  padding-left: var(--secondary-basic-icons-spacing-padding-left-desktop);
  border-top-left-radius: var(--secondary-basic-icons-radius-top-desktop);
  border-top-right-radius: var(--secondary-basic-icons-radius-right-desktop);
  border-bottom-right-radius: var(
    --secondary-basic-icons-radius-bottom-desktop
  );
  border-bottom-left-radius: var(--secondary-basic-icons-radius-left-desktop);
  background: var(--secondary-basic-icons-background-color);
  border-width: var(--secondary-basic-icons-border-width-desktop,0);
  border-style: var(--secondary-basic-icons-border-type);
  border-color: var(--secondary-basic-icons-border-color);
  box-shadow: var(--secondary-basic-icons-border-horizontal)
    var(--secondary-basic-icons-border-vertical)
    var(--secondary-basic-icons-border-blur)
    var(--secondary-basic-icons-border-spread)
    var(--secondary-basic-icons-border-shadow-color);
}

.icon-primary .icon-wrapper-secondary:hover {
  background: var(
    --secondary-hover-icons-background-color,
    var(--secondary-basic-icons-background-color)
  );
  border-width: var(
    --secondary-hover-icons-border-width-desktop,
    var(--secondary-basic-icons-border-width-desktop,0)
  );

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

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

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

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

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

.icon-primary .icon-wrapper-tertiary {
  line-height: 0;
  width: var(--tertiary-basic-icons-width-desktop);
  height: var(--tertiary-basic-icons-height-desktop);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s ease;
  margin-top: var(--tertiary-basic-icons-spacing-margin-top-desktop);
  margin-right: var(--tertiary-basic-icons-spacing-margin-right-desktop);
  margin-bottom: var(--tertiary-basic-icons-spacing-margin-bottom-desktop);
  margin-left: var(--tertiary-basic-icons-spacing-margin-left-desktop);
  padding-top: var(--tertiary-basic-icons-spacing-padding-top-desktop);
  padding-right: var(--tertiary-basic-icons-spacing-padding-right-desktop);
  padding-bottom: var(--tertiary-basic-icons-spacing-padding-bottom-desktop);
  padding-left: var(--tertiary-basic-icons-spacing-padding-left-desktop);
  border-top-left-radius: var(--tertiary-basic-icons-radius-top-desktop);
  border-top-right-radius: var(--tertiary-basic-icons-radius-right-desktop);
  border-bottom-right-radius: var(--tertiary-basic-icons-radius-bottom-desktop);
  border-bottom-left-radius: var(--tertiary-basic-icons-radius-left-desktop);
  background: var(--tertiary-basic-icons-background-color);
  border-width: var(--tertiary-basic-icons-border-width-desktop,0);
  border-style: var(--tertiary-basic-icons-border-type);
  border-color: var(--tertiary-basic-icons-border-color);
  box-shadow: var(--tertiary-basic-icons-border-horizontal)
    var(--tertiary-basic-icons-border-vertical)
    var(--tertiary-basic-icons-border-blur)
    var(--tertiary-basic-icons-border-spread)
    var(--tertiary-basic-icons-border-shadow-color);
}

.icon-primary .icon-wrapper-tertiary:hover {
  background: var(
    --tertiary-hover-icons-background-color,
    var(--tertiary-basic-icons-background-color)
  );
  border-width: var(
    --tertiary-hover-icons-border-width-desktop,
    var(--tertiary-basic-icons-border-width-desktop,0)
  );

  border-style: var(
    --tertiary-hover-icons-border-type,
    var(--tertiary-basic-icons-border-type)
  );

  border-color: var(
    --tertiary-hover-icons-border-color,
    var(--tertiary-basic-icons-border-color)
  );
  border-top-left-radius: var(
    --tertiary-hover-icons-radius-top-desktop,
    var(--tertiary-basic-icons-radius-top-desktop)
  );

  border-top-right-radius: var(
    --tertiary-hover-icons-radius-right-desktop,
    var(--tertiary-basic-icons-radius-right-desktop)
  );

  border-bottom-right-radius: var(
    --tertiary-hover-icons-radius-bottom-desktop,
    var(--tertiary-basic-icons-radius-bottom-desktop)
  );

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

.icon-primary .icon-image,
.icon-primary .icon-default,
.icon-primary .icon-hover {
  transition: opacity 0.2s ease;
}

.icon-primary .icon-image {
  object-fit: contain;
}

.icon-primary .icon-wrapper img {
  max-width: 100%;
  max-height: 100%;
}

.icon-primary .icon-placeholder {
  width: 100%;
  height: 100%;
  background: var(--border-color);
}

.icon-primary .icon-error {
  color: var(--text-color);
  opacity: 0.55;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-primary .icon-default {
  opacity: 1;
}

.icon-primary .icon-hover {
  opacity: 0;
  display: none;
}

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

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

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