@use '../utils/box-shadow_variables';
@use '../utils/size_variables';
@use '../core/box.scss';
@use '../core/columns.scss';
@use '../helper-classes/flexbox-and-grid.scss';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

label.box-label {
  cursor: pointer;
}

.box-label {
  @extend .box;
  @extend .is-centered;

  border-color: var(--token-color-palette-neutral-300);
  border-radius: 3px;
  box-shadow: box-shadow_variables.$box-link-shadow;
  text-decoration: none;
  transition: box-shadow size_variables.$speed;
  width: 100%;

  > div:first-child {
    flex-grow: 1;
  }

  &.is-column {
    @extend .is-flex-column;
  }

  &.is-selected {
    box-shadow: box-shadow_variables.$box-link-hover-shadow, box-shadow_variables.$box-shadow-middle;

    .icon {
      color: var(--token-color-palette-neutral-400);
    }
  }

  .icon {
    color: var(--token-color-palette-neutral-300);
  }

  input[type='radio'] {
    display: none;
  }

  input[type='radio'] + label {
    border: 1px solid var(--token-color-palette-neutral-300);
    border-radius: 50%;
    cursor: pointer;
    display: block;
    margin: 1rem auto 0;
    height: 1rem;
    width: 1rem;
  }

  input[type='radio']:checked + label {
    background: var(--token-color-palette-blue-200);
    border: 1px solid var(--token-color-palette-blue-200);
    box-shadow: inset 0 0 0 0.15rem hsl(0, 0%, 100%);
  }
}

.box-label-header {
  color: var(--token-color-palette-neutral-400);

  .is-selected & {
    color: var(--token-color-palette-neutral-600);
  }
}
