@import "../../themes/anywhere.globals.scss";

:host {
  display: block;

  .any-radiobutton {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    vertical-align: bottom;
    position: relative;
  }

  .any-radiobutton-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .any-radiobutton-icon {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0) scale(0.1);
    border-radius: 50%;
    visibility: hidden;
  }

  .any-radiobutton-box.any-highlight .any-radiobutton-icon {
    transform: translateZ(0) scale(1, 1);
    visibility: visible;
  }

  p-radiobutton {
    display: inline-flex;
    vertical-align: bottom;
    align-items: center;
  }

  .any-radiobutton-label {
    line-height: 1;
  }

  .any-radiobutton {
    width: var(--radiobuttonWidth);
    height: var(--radiobuttonHeight);
  }

  .any-radiobutton .any-radiobutton-box {
    border: var(--radiobuttonBorder);
    background: var(--inputBgColor);
    width: var(--radiobuttonWidth);
    height: var(--radiobuttonHeight);
    color: var(--textColor);
    border-radius: 50%;
    transition: var(--formElementTransition);
  }

  .any-radiobutton
    .any-radiobutton-box:not(.any-disabled):not(.any-highlight):hover {
    border-color: var(--primaryColor);
  }

  .any-radiobutton .any-radiobutton-box:not(.any-disabled).any-focus {
    outline: var(--focusOutline);
    outline-offset: var(--focusOutlineOffset);
    box-shadow: var(--focusShadow);
    border-color: var(--primaryColor);
  }

  .any-radiobutton .any-radiobutton-box .any-radiobutton-icon {
    width: var(--radiobuttonIconSize);
    height: var(--radiobuttonIconSize);
    transition-duration: var(--transitionDuration);
    background-color: var(--inputBgColor);
  }

  .any-radiobutton .any-radiobutton-box.any-highlight {
    border-color: var(--primaryColor);
    background: var(--primaryColor);
  }

  .any-radiobutton .any-radiobutton-box.any-highlight:not(.any-disabled):hover {
    border-color: var(--radiobuttonActiveHoverBorderColor);
    background: var(--radiobuttonActiveHoverBg);
    color: var(--radiobuttonIconActiveHoverColor);
  }

  .any-radiobutton-label {
    margin-left: 0.5rem;
  }
}
