rsuite/RadioTile/styles/index.less

A suite of react components

@import '../../styles/common';

.rs-radio-tile {
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--rs-radio-tile-border);
  padding: 10px;
  position: relative;
  cursor: pointer;

  &-label {
    font-weight: bold;
  }

  &-content {
    color: var(--rs-text-secondary);
  }

  &-mark {
    background: var(--rs-radio-tile-checked-color);
    border-bottom-left-radius: 50%;
    height: 48px;
    position: absolute;
    right: -24px;
    top: -24px;
    width: 48px;
    z-index: 3;
    opacity: 0;

    &-icon {
      position: absolute;
      font-size: 16px;
      top: 25px;
      left: 7px;
      color: var(--rs-radio-tile-checked-mark-color);
    }
  }

  &-checked &-mark {
    opacity: 1;
  }

  &-checked&-disabled {
    border-color: var(--rs-radio-tile-checked-disabled-color);
  }
  &-checked&-disabled &-mark {
    background-color: var(--rs-radio-tile-checked-disabled-color);
  }

  &-checked,
  &:hover:not(&-disabled) {
    border: 2px solid var(--rs-radio-tile-checked-color);
  }

  &-disabled,
  &-disabled &-content {
    color: var(--rs-text-disabled);
    cursor: @cursor-disabled;
  }

  input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  &-icon {
    font-size: var(--rs-radio-tile-icon-size);
  }
}