@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

.sky-selection-box {
  display: flex;
  flex-flow: row nowrap;
  padding: $sky-padding-even-large;
  text-align: left;

  &:hover {
    background: #ffffff;
    box-shadow:
      0px 0px 5px 0 rgba(0, 0, 0, 0.3),
      inset 0 0 0 1px $sky-highlight-color-info;

    .sky-switch-control {
      border: solid 1px $sky-highlight-color-info;
    }
  }

  &:focus {
    .sky-switch-control {
      //default
      outline: thin dotted;

      //webkit
      outline: -webkit-focus-ring-color auto 5px;
    }
  }

  &.sky-selection-box-selected {
    background: $sky-background-color-selected;
  }

  &.sky-selection-box-disabled {
    background: $sky-background-color-neutral-light;

    .sky-selection-box-icon {
      color: $sky-text-color-deemphasized;
    }
  }

  .sky-selection-box-icon {
    color: $sky-text-color-action-primary;
    margin: 0 $sky-space-md 0 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    .sky-icon {
      font-size: 24px !important;
    }
  }

  .sky-selection-box-content {
    flex: 1 1 auto;
    margin: 0 $sky-space-md 0 0;
    white-space: initial;
  }

  .sky-selection-box-header {
    padding-top: 3px;
  }

  .sky-selection-box-control {
    flex: 0 0 auto;
    padding-top: 5px;
  }
}

@include mixins.sky-theme-modern {
  .sky-selection-box {
    padding: $sky-theme-modern-padding-even-xl;

    &:hover {
      box-shadow:
        $sky-theme-modern-elevation-1-shadow-size
          $sky-theme-modern-elevation-1-shadow-color,
        inset 0 0 0 1px $sky-theme-modern-background-color-primary-dark;

      .sky-switch-control {
        border: solid 1px $sky-theme-modern-background-color-primary-dark;
      }
    }

    &:focus {
      .sky-switch-input:not(:disabled):checked + .sky-switch-control {
        border: none;
      }

      .sky-switch-control {
        outline: none;
        border: none;
        box-shadow: inset 0 0 0 2px $sky-theme-modern-color-blue-74;
      }
    }

    &.sky-selection-box-selected,
    &:focus.sky-selection-box-selected {
      background: var(--sky-background-color-item-selected);
      box-shadow:
        inset 0 0 0 2px #1870b8,
        0px 1px 8px 0px rgba(0, 0, 0, 0.3),
        inset 6px 0 0 0 $sky-background-color-primary-dark;
    }

    &.sky-selection-box-disabled {
      .sky-selection-box-icon {
        background: #d2d2d2;
        color: $sky-text-color-deemphasized;
      }
    }

    .sky-selection-box-icon {
      color: $sky-text-color-action-primary;
      background: $sky-color-blue-05;
      margin: 0 $sky-theme-modern-space-md 0 0;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .sky-selection-box-content {
      margin: 0 $sky-theme-modern-space-xl 0 0;
    }

    .sky-selection-box-description {
      margin: 3px 0 0 0;
    }
  }
}
