// Lightning Design System 2.24.3
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Initializes a visual picker component
 *
 * @name coverable-content
 * @selector .slds-visual-picker
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-visual-picker {
  display: inline-flex;
  position: relative;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  text-align: center;
  cursor: pointer;

  + .slds-visual-picker {
    margin-left: $spacing-medium;
  }

  &:active .slds-visual-picker__figure {
    border: $border-width-thin solid var(--slds-g-color-border-brand-2, #{$color-border-selection-hover});
    box-shadow: 0 0 0 1px var(--slds-g-color-border-brand-2, #{$color-border-selection-hover}) inset;
  }

  &:hover .slds-visual-picker__figure {
    cursor: pointer;
  }

  input:not(:disabled) ~ label:hover .slds-visual-picker__figure {
    cursor: pointer;
    outline: 0;
    border: $border-width-thin solid var(--slds-g-color-border-brand-2, #{$color-border-selection-hover});
    box-shadow: 0 0 0 1px var(--slds-g-color-border-brand-2, #{$color-border-selection-hover}) inset;
  }

  // Hide input
  input {
    @include square(1px);
    border: 0;
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;

    &:focus ~ label .slds-visual-picker__figure {
      border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
      box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
      outline: 0;
    }

    &:checked ~ label .slds-visual-picker__figure {
      box-shadow: $elevation-shadow-4;
    }

    &:checked:focus ~ label .slds-visual-picker__figure {
      box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
    }

    &:focus ~ label .slds-visual-picker__body > *:first-child {
      text-decoration: underline;
    }

    /**
     * @name not-selected
     * @summary Non-selected state
     * @selector .slds-is-not-selected
     * @restrict .slds-visual-picker__figure > span
     * @modifer
     * @group interactions
     */
    &:checked ~ label .slds-is-not-selected {
      display: none;
    }

    /**
     * @name selected
     * @summary Selected state
     * @selector .slds-is-selected
     * @restrict .slds-visual-picker__figure > span
     * @modifer
     * @group interactions
     */
    &:checked ~ label .slds-is-selected {
      display: block;
    }

    /**
     * @summary Icon within visual picker
     * @selector .slds-visual-picker__icon
     * @restrict .slds-visual-picker__figure
     */
    &:checked ~ label .slds-visual-picker__icon {
      background-color: var(--slds-g-color-brand-base-60, #{$color-brand});
      border: $border-width-thin solid var(--slds-g-color-border-brand-2, #{$color-border-selection-hover});
    }

    /**
     * @summary Text within visual picker
     * @selector .slds-visual-picker__text
     * @restrict .slds-visual-picker__figure
     */
    /* stylelint-disable max-nesting-depth */
    &:checked ~ label .slds-visual-picker__text {
      border: $border-width-thin solid var(--slds-g-color-border-brand-2, #{$color-border-selection-hover});
      box-shadow: 0 0 0 1px var(--slds-g-color-border-brand-2, #{$color-border-selection-hover}) inset;

      &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border-color: transparent;
        border-style: solid;
        border-radius: 0 $border-radius-medium 0 0;
        border-width: 1rem;
        border-right-color: var(--slds-g-color-brand-base-60, #{$color-brand});
        border-top-color: var(--slds-g-color-brand-base-60, #{$color-brand});
      }
    }

    &[disabled] {
      cursor: not-allowed;
      user-select: none;

      ~ label .slds-visual-picker__body,
      ~ label .slds-visual-picker__text {
        color: var(--slds-g-color-neutral-base-50, #{$color-text-input-disabled});
      }

      ~ label .slds-visual-picker__figure {
        border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
        box-shadow: none;

        &:hover {
          cursor: not-allowed;
          user-select: none;
          box-shadow: none;
        }
      }

      ~label .slds-visual-picker__figure .slds-icon {
        fill: var(--slds-g-color-neutral-base-80, #{$color-text-icon-default-disabled});
      }

    }
  }
}

/**
 * @summary Visual container for icon and text
 * @selector .slds-visual-picker__figure
 * @restrict .slds-visual-picker div, .slds-visual-picker span
 */
.slds-visual-picker__figure {
  display: block;
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  border-radius: $border-radius-medium;
  text-align: center;

  .slds-icon-action-check {
    background-color: var(--slds-g-color-brand-base-60, #{$color-brand});
  }

  span {
    display: block;
  }

  .slds-is-selected {
    display: none;
  }
}

/**
 * @name medium
 * @summary Size modifier to adjust to the default size of medium
 * @selector .slds-visual-picker_medium
 * @restrict .slds-visual-picker
 * @modifier
 * @group size
 */
.slds-visual-picker_medium {

  .slds-visual-picker__figure,
  .slds-visual-picker__body {
    width: $size-x-small;
  }

  .slds-visual-picker__figure {
    height: $size-x-small;
  }
}

/**
 * @name large
 * @summary Size modifier to adjust to the size of large
 * @selector .slds-visual-picker_large
 * @restrict .slds-visual-picker
 * @modifier
 * @group size
 */
.slds-visual-picker_large {

  .slds-visual-picker__figure,
  .slds-visual-picker__body {
    width: $size-small;
  }

  .slds-visual-picker__figure {
    height: $size-small;
  }
}

/**
 * @name small
 * @summary Size modifier to adjust to the size of small
 * @selector .slds-visual-picker_small
 * @restrict .slds-visual-picker
 * @modifier
 * @group size
 */
.slds-visual-picker_small {

  .slds-visual-picker__figure,
  .slds-visual-picker__body {
    width: rem(136px);
  }

  .slds-visual-picker__figure {
    height: rem(136px);
  }
}

/**
 * @summary Text area that sits outside the visual picker
 * @selector .slds-visual-picker__body
 * @restrict .slds-visual-picker span
 */
.slds-visual-picker__body {
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: $spacing-medium $spacing-x-small;
  border: 0;
  border-radius: 0;
}