@import 'variables/gutters';

.ui-radiobutton-group {
  display: flex;
  flex-direction: column;

  &--invalid {
    gap: var(--digi--layout--gutter--xs);
  }

  &__radiobuttons {
    display: flex;
    gap: var(--digi--layout--gutter--s);
    flex-direction: column;

    &--horizontal {
      flex-direction: row;
      align-items: center;
      gap: $digi--layout--gutter--l;
    }
  }

  &__radiobutton {
    ::ng-deep .digi-form-radiobutton__circle {
      top: 50% !important;
      transform: translateY(-50%);

      &::after {
        top: 50% !important;
        left: 50% !important;
      }
    }
    ::ng-deep .digi-form-radiobutton__input:focus ~ .digi-form-radiobutton__circle {
      box-shadow: var(--digi--ui--box-shadow--focus) !important;
    }
  }
}