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

/**
 * @summary Map container
 * @name base
 * @selector .slds-map_container
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-map_container {
  flex: 3 1 auto;
}

/**
 * @summary 3rd party map element found inside of the map container
 * @selector .slds-map
 * @restrict .slds-map_container div
 */
.slds-map {
  position: relative;
  min-width: rem(380px); // Width of the preview panel
  width: 100%;
  max-height: 100%;

  &:before {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    padding-top: 56.25%;
  }

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    border: 0;
  }
}

/**
 * @summary Modifier that informs the parent grid container the coordinates panel is active
 * @selector .slds-has-coordinates
 */
.slds-has-coordinates {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  max-height: rem(660px);
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});

  .slds-map:before {
    padding-top: 75%;
  }
}

/**
 * @summary Element inside the coordinates panel that contains the title of the panel
 * @selector .slds-coordinates
 * @restrict .slds-has-coordinates div
 */
.slds-coordinates {
  overflow: auto;
  flex: 1 1 auto;
}

/**
 * @summary Element inside the coordinates panel that contains the title of the panel
 * @selector .slds-coordinates__header
 * @restrict .slds-coordinates div
 */
.slds-coordinates__header {
  padding: $spacing-medium;
}

/**
 * @summary Title inside the coordinates panel
 * @selector .slds-coordinates__title
 * @restrict .slds-coordinates h2
 */
.slds-coordinates__title {
  font-size: $font-size-5;
  font-weight: $font-weight-bold;
}

/**
 * @summary Actionable items inside of the coordinates list
 * @selector .slds-coordinates__item-action
 * @restrict .slds-coordinates li button
 */
.slds-coordinates__item-action {
  padding: $spacing-x-small $spacing-medium;
  width: 100%;

  .slds-text-link {
    display: block;
  }

  &:hover,
  &:focus {
    background-color: var(--slds-g-color-neutral-base-95, #{$color-background-row-hover});
    outline: 0;

    .slds-text-link {
      text-decoration: underline;
    }
  }

  &:focus {
    box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
  }

  &:active {
    background-color: var(--slds-g-color-neutral-base-95, #{$color-background-row-active});
  }

  &[aria-pressed="true"] {
    background-color: var(--slds-g-color-neutral-base-95, #{$color-background-row-selected});

    .slds-text-link {
      color: var(--slds-g-link-color-focus, #{$color-text-link-active});
    }
  }
}