//
// CivicTheme Map component styles.
//

.ct-map {
  $root: &;

  &#{$root}--with-background {
    padding-left: var(--ct-map-space-horizontal);
    padding-right: var(--ct-map-space-horizontal);
  }

  #{$root}__canvas {
    position: relative;
    height: 0;
    overflow: hidden;
    padding: 0 0 var(--ct-map-padding-bottom) 0;
  }

  #{$root}__iframe {
    position: absolute;
  }

  #{$root}__link {
    display: inline-block;
    margin-top: ct-spacing(2);
    margin-bottom: ct-spacing(2);
  }

  @include ct-component-theme($root) using($root, $theme) {
    &#{$root}--with-background {
      @include ct-component-property($root, $theme, wrapper, background-color);
    }
  }
}
