@import "~@politico/interactive-style/vars.scss";

$width: 100%;
$stroke: 4px;
$ind: #6bd1bb;

@if #{calc($width)} < 50px {
  $stroke: 2px;
}

.styles :global {
  .border-container {
    width: $width;
    //height: 100%;
    position: relative;
    padding-top: 110%;
    overflow: hidden;
  }
  .background {
    box-sizing: border-box;
    width: $width;
    padding-top: calc(#{$width} - (2 * #{$stroke}));
    border-radius: $width;
    border: $stroke solid $dem;
    position: absolute;
    bottom: 0;
    &.type-solid {
      &.party-dem {
        border: $stroke solid $dem;
        background-color: $dem;
      }
      &.party-gop {
        border: $stroke solid $gop;
        background-color: $gop;
      }
      &.party-ind {
        border: $stroke solid $ind;
        background-color: $ind;
      }
    }
    &.type-outline {
      background-color: rgba(255, 255, 255, 0);
      &.party-dem {
        border: $stroke solid $dem;
      }
      &.party-gop {
        border: $stroke solid $gop;
      }
      &.party-ind {
        border: $stroke solid $ind;
      }
    }
    &.type-none {
      border: $stroke solid rgba(255, 255, 255, 0);
      background-color: rgba(255, 255, 255, 0);
    }
  }

  img {
    width: 100%;
    border-bottom-left-radius: calc(#{$width}/2 - #{$stroke});
    border-bottom-right-radius: calc(#{$width}/2 - #{$stroke});
    position: absolute;
    bottom: 0;
    &.BW-true {
      -webkit-filter: grayscale(1) contrast(107%) brightness(103%);
      filter: grayscale(1) contrast(107%) brightness(103%);
    }
  }

  amp-img {
    width: 100%;
    border-bottom-left-radius: calc(#{$width}/2 - #{$stroke});
    border-bottom-right-radius: calc(#{$width}/2 - #{$stroke});
    position: absolute;
    bottom: 0;
    &.BW-true {
      -webkit-filter: grayscale(1) contrast(107%) brightness(103%);
      filter: grayscale(1) contrast(107%) brightness(103%);
    }
  }
}