:host {
  /* scw element */
  position: relative;
  box-sizing: border-box;
  --margin-right: initial;
  --margin-bottom: initial;
  --gap-h-int: initial;
  --gap-v-int: initial;
  margin-right: var(--margin-right, var(--gap-h-int, initial));
  margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
  display: block;
}

:host([warning]) {
  outline: 2px solid red !important;
}
:host {
  display: inline-flex;
  --btn-text: var(
    --scw-theme-color-btn-text,
    var(--scw-color-primary-01)
  );
  --btn-border: var(--scw-theme-color-btn, var(--scw-color-primary-07));
  --btn-background: var(
    --scw-theme-color-btn,
    var(--scw-color-primary-07)
  );
  --btn-background-hover: var(
    --scw-theme-color-06,
    var(--scw-color-primary-06)
  );
  --btn-text-hover: var(
    --scw-theme-color-01,
    var(--scw-color-primary-01)
  );
  --btn-border-hover: var(
    --scw-theme-color-06,
    var(--scw-color-primary-06)
  );
}

:host([design=outlined]),
:host([design=icon]) {
  --btn-text: var(
    --scw-theme-body-color,
    var(--scw-color-grey-02)
  );
  --btn-border: var(
    --scw-theme-body-color,
    var(--scw-color-grey-07)
  );
  --btn-background: transparent;
  --btn-background-hover: var(
    --scw-theme-body-color,
    var(--scw-color-grey-092)
  );
  --btn-text-hover: var(
    --scw-theme-body-color-inv,
    var(--scw-color-grey-02)
  );
  --btn-border-hover: var(
    --scw-theme-body-color,
    var(--scw-color-grey-07)
  );
}

:host([design=light]) {
  --btn-text: var(--scw-color-grey-02);
  --btn-border: var(--scw-color-grey-092);
  --btn-background: var(--scw-color-grey-092);
  --btn-background-hover: var(--scw-color-grey-09);
  --btn-text-hover: var(--scw-color-grey-02);
  --btn-border-hover: var(--scw-color-grey-09);
}

:host([design=white]) {
  --btn-text: var(--scw-color-grey-02);
  --btn-border: var(--scw-color-grey-10);
  --btn-background: var(--scw-color-grey-10);
  --btn-background-hover: var(--scw-color-grey-09);
  --btn-text-hover: var(--scw-color-grey-02);
  --btn-border-hover: var(--scw-color-grey-09);
}

:host([design=block]) {
  --btn-text: var(--scw-color-grey-02);
  --btn-border: transparent;
  --btn-background: transparent;
  --btn-background-hover: transparent;
  --btn-text-hover: var(--scw-color-grey-04);
  --btn-border-hover: transparent;
}

:host([design=text]),
:host([design=plain]) {
  --btn-text: var(--scw-theme-color, var(--scw-color-primary-02));
  --btn-border: transparent;
  --btn-background: transparent;
  --btn-background-hover: transparent;
  --btn-text-hover: var(
    --scw-theme-color-hover,
    var(--scw-color-primary-01)
  );
  --btn-border-hover: transparent;
}

.small,
.medium,
.large {
  background-color: var(--scw-color-primary-07);
  border-radius: 8px 8px 8px 8px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--scw-color-primary-07);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.small > *:not(:last-child),
.medium > *:not(:last-child),
.large > *:not(:last-child) {
  margin-right: calc(var(--scw-spacing-1) * 0.4);
  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
}

a {
  width: 100%;
}
a:focus-visible {
  outline: none;
  box-shadow: var(--scw-effect-focus-shadow);
  border-radius: 4px;
}
a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

:host([design=solidIcon]) .scw-link,
:host([design=icon]) .scw-link {
  background-color: var(--scw-color-primary-07);
  border-radius: 8px 8px 8px 8px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--scw-color-primary-07);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding-left: calc(var(--scw-spacing-1) * 0.6);
  padding-right: calc(var(--scw-spacing-1) * 0.6);
  padding-top: calc(var(--scw-spacing-1) * 0.6);
  padding-bottom: calc(var(--scw-spacing-1) * 0.6);
  text-decoration: none;
}
:host([design=solidIcon]) .scw-link > *:not(:last-child),
:host([design=icon]) .scw-link > *:not(:last-child) {
  margin-right: calc(var(--scw-spacing-1) * 0.4);
  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
}
:host([design=solidIcon]) .scw-link scw-icon,
:host([design=solidIcon]) .scw-link .icon,
:host([design=icon]) .scw-link scw-icon,
:host([design=icon]) .scw-link .icon {
  background-color: rgba(0, 0, 0, 0);
  width: 26px;
  height: 26px;
}

.small,
.medium,
.large,
:host([design=solidIcon]) .scw-link,
:host([design=icon]) .scw-link {
  transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease;
  background-color: var(--btn-background);
  border-color: var(--btn-border);
}

.small:hover,
.medium:hover,
.large:hover,
:host([design=solidIcon]:not([aria-disabled=true])) .scw-link:hover,
:host([design=icon]:not([aria-disabled=true])) .scw-link:hover {
  background-color: var(--btn-background-hover);
  border-color: var(--btn-border-hover);
}

:host([aria-disabled=true]) .small,
:host([aria-disabled=true]) .medium,
:host([aria-disabled=true]) .large {
  background-color: var(--scw-color-grey-09);
  border-radius: 8px 8px 8px 8px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--scw-color-grey-09);
}
:host([aria-disabled=true]) .small .label,
:host([aria-disabled=true]) .medium .label,
:host([aria-disabled=true]) .large .label {
  text-align: CENTER;
  font: var(--scw-type-text-semibold-font);
  color: var(--scw-color-grey-07);
}
:host([aria-disabled=true]) .small scw-icon,
:host([aria-disabled=true]) .small .icon,
:host([aria-disabled=true]) .medium scw-icon,
:host([aria-disabled=true]) .medium .icon,
:host([aria-disabled=true]) .large scw-icon,
:host([aria-disabled=true]) .large .icon {
  --scw-icon-color: var(--scw-color-grey-08);
}

:host([design=solidIcon][aria-disabled=true]) .scw-link,
:host([design=icon][aria-disabled=true]) .scw-link {
  background-color: var(--scw-color-grey-09);
  border-radius: 8px 8px 8px 8px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--scw-color-grey-095);
}
:host([design=solidIcon][aria-disabled=true]) .scw-link scw-icon,
:host([design=solidIcon][aria-disabled=true]) .scw-link .icon,
:host([design=icon][aria-disabled=true]) .scw-link scw-icon,
:host([design=icon][aria-disabled=true]) .scw-link .icon {
  --scw-icon-color: var(--scw-color-grey-06);
}

:host([design=plain]) .scw-link {
  color: var(--btn-text);
}

:host([design=plain]:not([aria-disabled=true])) .scw-link:hover {
  color: var(--btn-text-hover);
}

:host([hover-underline]:not([aria-disabled=true])) .scw-link:hover {
  text-decoration: underline;
}

.scw-link .label {
  color: var(--btn-text);
}
.scw-link scw-icon {
  --scw-icon-color: var(--btn-text);
}

.scw-link:hover .label {
  color: var(--btn-text-hover);
}
.scw-link:hover scw-icon {
  --scw-icon-color: var(--btn-text-hover);
}

.scw-link {
  text-decoration: none;
}

.small {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding-left: calc(var(--scw-spacing-1) * 1.4);
  padding-right: calc(var(--scw-spacing-1) * 1.4);
  padding-top: calc(var(--scw-spacing-1) * 0.8);
  padding-bottom: calc(var(--scw-spacing-1) * 0.8);
}
.small > *:not(:last-child) {
  margin-right: calc(var(--scw-spacing-1) * 0.4);
  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
}
.small .label {
  font: var(--scw-type-text-semibold-03-font);
}
.small scw-icon,
.small .icon {
  background-color: rgba(0, 0, 0, 0);
  width: 16px;
  height: 16px;
  display: flex;
}

.medium {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding-left: calc(var(--scw-spacing-1) * 1.8);
  padding-right: calc(var(--scw-spacing-1) * 1.8);
  padding-top: var(--scw-spacing-1);
  padding-bottom: var(--scw-spacing-1);
}
.medium > *:not(:last-child) {
  margin-right: calc(var(--scw-spacing-1) * 0.4);
  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
}
.medium .label {
  font: var(--scw-type-text-semibold-font);
}
.medium scw-icon,
.medium .icon {
  background-color: rgba(0, 0, 0, 0);
  width: 17px;
  height: 17px;
  display: flex;
}

.large {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding-left: calc(var(--scw-spacing-1) * 2.6);
  padding-right: calc(var(--scw-spacing-1) * 2.6);
  padding-top: calc(var(--scw-spacing-1) * 1.2);
  padding-bottom: calc(var(--scw-spacing-1) * 1.2);
}
.large > *:not(:last-child) {
  margin-right: calc(var(--scw-spacing-1) * 0.4);
  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
}
.large .label {
  font: var(--scw-type-text-semibold-06-font);
}
.large scw-icon,
.large .icon {
  background-color: rgba(0, 0, 0, 0);
  width: 20px;
  height: 20px;
  display: flex;
}

:host([shape=pill]) .scw-link {
  border-radius: 25px;
}

:host([design=block]) .scw-link {
  padding-left: 0;
  padding-right: 0;
}

:host([design=text]) .scw-link {
  display: inline;
  border-radius: 4px;
}
:host([design=text]) .scw-link .label {
  text-decoration: underline;
}

:host([design=text][underline=false]) .scw-link .label {
  text-decoration: none;
}

:host([design=text]) {
  display: inline;
}
:host([design=text]) .scw-link .label {
  display: inline;
}
:host([design=text]) .scw-link scw-icon,
:host([design=text]) .scw-link .icon {
  display: inline-flex;
  height: 1em;
  width: 1em;
}
:host([design=text]) .scw-link .icon {
  position: relative;
  top: 0.15em;
}

:host([design=text][aria-disabled=true]) .scw-link .label {
  color: var(--scw-color-grey-07);
}
:host([design=text][aria-disabled=true]) .scw-link scw-icon {
  --scw-icon-color: var(--scw-color-grey-07);
}

@media (max-width: 991px) {
  :host([menu]) .scw-link {
    padding-left: calc(var(--scw-spacing-1) * 0.7);
    padding-right: calc(var(--scw-spacing-1) * 0.7);
    padding-top: calc(var(--scw-spacing-1) * 0.4);
    padding-bottom: calc(var(--scw-spacing-1) * 0.4);
  }
  :host([menu]) .scw-link .label {
    font-size: inherit;
  }
}
.disabled {
  width: 100%;
}