// ============================================================================
// :: Option
// ============================================================================
/**
 * The option component combines a radio-button with a content block. This
 * content block can be anything. But there is a label layed over the content
 * so the content block can toggle the radio button.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-option {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

  &:focus {
    outline: 0.2rem solid $primary-color-base;
    outline-offset: 0.2rem;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.m-option__content {
  position: relative;
  z-index: $z-index-floor;
}

.m-option__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $z-index-atmosphere;

  width: 100%;
  height: 100%;

  cursor: pointer;
}

.m-option__radio {
  margin-right: 1rem;
}

.m-option__content {
  width: 100%;
}

.m-option__content-container {
  pointer-events: none;

  padding: 1.5rem;

  background-color: $background-color-white;
  border: $border-width-base solid $border-color-1x-light;
  border-radius: $border-radius-base;

  // style the icon
  &:before {
    font-size: $icon-size-2x-large;

    color: $primary-color-base;
  }
}