// Lightning Design System 2.8.0
// 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 vertical visual picker component
 *
 * @name vertical
 * @selector .slds-visual-picker_vertical
 * @restrict .slds-visual-picker
 * @support dev-ready
 * @variant
 */
.slds-visual-picker_vertical {

  width: $size-large;
  display: flex;

  .slds-visual-picker__figure {
    text-align: left;
    padding: $spacing-medium;
    height: $size-xx-small;
  }

  + .slds-visual-picker_vertical {
    margin-left: 0;
    margin-top: $spacing-medium;
  }

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

  input:focus ~ label .slds-visual-picker__text .slds-text-heading_medium {
    text-decoration: underline;
  }
}