/***** Vistra Design System *****/
/************************************/
/* 16px */
/* 24px */
/***** START: New theme variables *****/
/************************************/
/***** END: New theme variables ******/
/************************************/
.icon-button {
  --size: 40px;
  --icon-button-bg-color: transparent;
  --icon-button-color: #0909B7;
  --icon-button-border-color: #0909B7;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 50%;
  background: var(--icon-button-bg-color);
  border: 1px solid var(--icon-button-border-color);
  padding: var(--spacing-compact);
  width: var(--circlesize);
  height: var(--circlesize);
  line-height: 1;
}
.icon-button .icon {
  width: var(--size);
  height: var(--size);
}
.icon-button .icon svg {
  width: var(--size);
  height: var(--size);
}
.icon-button .icon svg path {
  fill: var(--icon-button-color);
}
.icon-button--64 {
  --size: 40px;
  --circlesize: 64px;
}
.icon-button--64 .icon--play {
  --size: 25px;
  border-left: 2px solid transparent;
}
.icon-button--48 {
  --size: 20px;
  --circlesize: 48px;
}
.icon-button--36 {
  --size: 16px;
  --circlesize: 36px;
}
.icon-button--24 {
  padding: var(--spacing-minimum);
  --size: 12px;
  --circlesize: 24px;
}
.icon-button--transparent-stroke {
  --icon-button-bg-color: transparent;
  --icon-button-border-color: #FFF;
  --icon-button-color: #FFF;
}
.icon-button--transparent-stroke:hover {
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.3s;
  cursor: pointer;
}
.icon-button--transparent-stroke:active {
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.3s;
}
.icon-button--transparent-stroke:focus-visible {
  box-shadow: 0 0 0 5px #3f80ff;
  outline: 2px solid white;
  transition: background 0.3s;
}
.icon-button--light, .icon-button--light-stroke {
  --icon-button-bg-color: #FFF;
  --icon-button-border-color: transparent;
  --icon-button-color: #0909B7;
}
.icon-button--light:hover, .icon-button--light-stroke:hover {
  background: rgb(217, 221, 230);
  transition: background 0.3s;
  cursor: pointer;
}
.icon-button--light:active, .icon-button--light-stroke:active {
  background: rgb(191, 198, 214);
  transition: background 0.3s;
}
.icon-button--light:focus-visible, .icon-button--light-stroke:focus-visible {
  box-shadow: 0 0 0 5px #3f80ff;
  outline: 2px solid white;
  transition: background 0.3s;
}
.icon-button--light-stroke {
  --icon-button-border-color: #0909B7;
}
.icon-button--play {
  --icon-button-bg-color: #FFF;
  --icon-button-border-color: #FFF;
}
.icon-button--play:hover {
  background: rgb(230, 232, 239);
  transition: background 0.3s;
  --icon-button-border-color: colors.$blue-900-10-solid;
  cursor: pointer;
}
.icon-button--play:active {
  background: rgb(191, 198, 214);
  transition: background 0.3s;
  --icon-button-border-color: colors.$blue-900-25-solid;
}
.icon-button--play:focus-visible {
  box-shadow: 0 0 0 5px #3f80ff;
  outline: 2px solid white;
  transition: background 0.3s;
}
.icon-button.disabled {
  --icon-button-bg-color: #a6a9aD;
  --icon-button-color: #a6a9aD;
  --icon-button-border-color: #a6a9aD;
}
/*# sourceMappingURL=icon-button.css.map */