:host {
  display: block;
}

.dc-radio-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  outline: none;
}

/* Radio  */
.dc-radio-radio .dc-radio-input {
  display: inline-block;
  border: 1px solid var(--dc-ui-border-default);
  border-radius: 12px;
  background-color: var(--dc-background-colour);
  appearance: none;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* Standard radio */
.dc-radio-radio.dc-radio-size-standard .dc-radio-input {
  width: 24px;
  height: 24px;
}

/* Small radio */
.dc-radio-radio.dc-radio-size-small .dc-radio-input {
  width: 20px;
  height: 20px;
}

/* Label  */
.dc-radio-label {
  font-family: var(--dc-font-family);
  color: var(--dc-primary-text-color);
  font-style: normal;
  cursor: pointer;
}

.dc-radio-radio .dc-radio-label {
  padding-left: 12px;
  font-weight: 400;
}

/* Label with standard radio */
.dc-radio-size-standard .dc-radio-label {
  font-size: 16px;
  text-align: middle;
}

/* Label with small radio */
.dc-radio-size-small .dc-radio-label {
  font-size: 14px;
  text-align: middle;
}

.dc-radio-radio .dc-radio-input:hover {
  border: 1px solid var(--dc-primary-colour);
  border-radius: 12px;
  cursor: pointer;
}

/* Focus state */
.dc-radio-radio .dc-radio-input:focus:focus-visible {
  outline: 3px solid var(--dc-primary-colour);
  border-radius: 12px;
  outline-offset: 2px;
}

.dc-radio-radio .dc-radio-input:checked {
  border: 3px solid var(--dc-background-colour);
  background: var(--dc-primary-colour);
  box-shadow: 0 0 0 1px var(--dc-primary-colour);
  outline: none;
  transition: opacity 0.0005s ease-in-out;
}

.dc-radio-radio .dc-radio-input:disabled {
  border: 1px solid var(--dc-ui-disabled-border);
}

.dc-radio-disabled .dc-radio-label {
  color: var(--dc-greyscale-04);
  cursor: default;
}

.dc-radio-disabled.dc-radio-radio .dc-radio-input:checked {
  border: 3px solid var(--dc-background-colour);
  background: var(--dc-greyscale-04);
  box-shadow: 0 0 0 1px var(--dc-ui-disabled-border);
}

/*  radio button  */
.dc-radio-button .dc-radio-input {
  position: absolute;
  cursor: pointer;
  opacity: 0;
  overflow: hidden;
}

/* Add button variant style */
.dc-radio-button .dc-radio-input + label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  border: 2px solid var(--dc-ui-border-default);
  background-color: var(--dc-background-colour);
  font-family: var(--dc-font-family);
  white-space: nowrap;
  font-weight: 500;
  border-radius: 8px;
}

/* For standard button variant */
.dc-radio-button.dc-radio-size-standard .dc-radio-input + label {
  height: 48px;
  padding: 14px 16px;
}

/* For small  button variant  */
.dc-radio-button.dc-radio-size-small .dc-radio-input + label {
  height: 34px;
  padding: 8px 12px;
}

/* Image*/
.dc-radio-image path {
  fill: var(--dc-primary-text-color);
}

/* Image size for standard */
.dc-radio-size-standard .dc-radio-image {
  height: 20px;
  width: 20px;
  align-items: center;
}

/* Image size for small */
.dc-radio-size-small .dc-radio-image {
  height: 16px;
  width: 16px;
  align-items: center;
}

/* focus for button */
.dc-radio-button .dc-radio-input:focus:focus-visible + label {
  outline: 3px solid var(--dc-primary-colour);
  border: 1px solid var(--dc-ui-border-default);
  outline-offset: 1px;
}

/* Focus style for grouped */
.dc-radio-button.dc-radio-grouped .dc-radio-input:focus-visible + label {
  outline-offset: 1px;
  outline: 3px solid var(--dc-primary-colour);
  border: 1px solid var(--dc-ui-border-default);
  z-index: 1;
}

/* Hover style for  button variant */
.dc-radio-button .dc-radio-input:hover:not(:disabled) + label {
  background: var(--dc-secondary-accent-colour);
  color: var(--dc-primary-interactive-color);
  cursor: pointer;
}
 
.dc-radio-button .dc-radio-input:hover:enabled + label .dc-radio-image path {
  fill: var(--dc-primary-interactive-color);
}

/* Disable style button variant */
.dc-radio-disabled.dc-radio-button .dc-radio-input + label {
  color: var(--dc-greyscale-04);
  border-color: var(--dc-ui-disabled-border);
}

/* Checked state */
.dc-radio-button .dc-radio-input:checked + label {
  background-color: var(--dc-primary-colour);
  color: var(--dc-background-colour);
  gap: 12px;
  text-align: center;
}

.dc-radio-button .dc-radio-input:checked + label::before {
  content: '';
  display: block;
  width: 20px;  
  height: 20px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M17.4026 4.09188L6.46447 15.03L2.59748 11.163C2.41443 10.9799 2.11763 10.9799 1.93455 11.163L1.49263 11.6049C1.30958 11.7879 1.30958 12.0847 1.49263 12.2678L6.13302 16.9082C6.31607 17.0913 6.61287 17.0913 6.79595 16.9082L18.5074 5.19676C18.6904 5.01371 18.6904 4.71691 18.5074 4.53383L18.0654 4.09188C17.8824 3.90883 17.5856 3.90883 17.4026 4.09188Z' fill='white'/%3E%3C/svg%3E") no-repeat;
  mask-position: left;
  background-color: var(--dc-background-colour);
}

.dc-radio-button .dc-radio-input:checked:hover:enabled + label::before {
  background-color: var(--dc-primary-interactive-color);
}

.dc-radio-button.dc-radio-size-small.dc-radio-button .dc-radio-input:checked + label::before {
  width: 16px;  
  height: 16px;
}

.dc-radio-button .dc-radio-input:checked:hover:not(:disabled) + label {
  background: var(--dc-secondary-accent-colour);
  color: var(--dc-primary-interactive-color);
  cursor: pointer;
}

.dc-radio-disabled.dc-radio-button .dc-radio-input:checked + label {
  background-color: var(--dc-background-colour);
  color: var(--dc-greyscale-04);
  border-color: var(--dc-ui-disabled-border);
}

.dc-radio-disabled.dc-radio-button .dc-radio-input:checked + label::before {
  background-color: var(--dc-greyscale-04);
}

.dc-radio-button .dc-radio-input:checked + label .dc-radio-image {
  display: none;
}

.dc-radio-disabled.dc-radio-button .dc-radio-image path {
  fill: var(--dc-greyscale-04);
}

/* Image Left Direction */
.dc-radio-image-left {
  display: flex;
  flex-direction: row-reverse;
}

.dc-radio-image-left .dc-radio-image {
  padding-right: 12px;
}

/* Image Right Direction */
.dc-radio-image-right {
  display: flex;
}

.dc-radio-image-right .dc-radio-image {
  padding-left: 12px;
}

/* For grouped style   */
.dc-radio-grouped .dc-radio-input + label {
  border: 1px solid var(--dc-ui-border-default);
  margin-right: 0;
}

:host(:first-child) .dc-radio-grouped .dc-radio-input + label {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-right: 0;
}

:host:not(:first-child) .dc-radio-grouped .dc-radio-input + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

:host(:last-child) .dc-radio-grouped .dc-radio-input + label {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

:host:not(:last-child) .dc-radio-grouped .dc-radio-input + label {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}