:host {
  display: block;
}

.hy-cta-button-container {
  display: flex;
}

.hy-cta-button {
  cursor: pointer;
  font-family: var(--main-font-family);
  font-weight: 600;
  position: relative;
  text-decoration: none;

  &.transparent-background {
    background-color: var(--grayscale-white);
    border: 3px solid var(--grayscale-black);
    color: var(--grayscale-black);

    @include breakpoint($xlarge) {
      border: 4px solid var(--grayscale-black);
    }

    .link-icon svg {
      background-color: var(--grayscale-white);
      fill: var(--grayscale-black);
    }

    .text {
      color: var(--grayscale-black);
    }
  }

  &.black-background {
    background-color: var(--grayscale-black);
    border: 3px solid var(--grayscale-white);
    color: var(--grayscale-white);

    @include breakpoint($xlarge) {
      border: 4px solid var(--grayscale-white);
    }

    .link-icon svg {
      background-color: var(--grayscale-black);
      fill: var(--grayscale-white);
    }

    .text {
      color: var(--grayscale-white);
    }

    &:hover {
      background-color: var(--brand-main-active);

      .link-icon svg {
        background-color: var(--brand-main-active);
      }
    }

    &:focus {
      background-color: var(--brand-main);

      .link-icon svg {
        background-color: var(--brand-main);
      }
    }
  }

  &.blue-background {
    background-color: var(--brand-main-light);
    border: 3px solid var(--grayscale-white);
    color: var(--grayscale-white);

    @include breakpoint($xlarge) {
      border: 4px solid var(--grayscale-white);
    }

    .link-icon svg {
      background-color: var(--brand-main-light);
      fill: var(--grayscale-white);
    }

    .text {
      color: var(--grayscale-white);
    }

    &:hover {
      background-color: var(--brand-main);

      .link-icon svg {
        background-color: var(--brand-main);
      }
    }

    &:focus {
      background-color: var(--brand-main-active);

      .link-icon svg {
        background-color: var(--brand-main-active);
      }
    }
  }

  &.white-background {
    background-color: var(--grayscale-white);
    border: 3px solid var(--brand-main-light);
    color: var(--brand-main-light);

    @include breakpoint($xlarge) {
      border: 4px solid var(--brand-main-light);
    }

    .link-icon svg {
      background-color: var(--grayscale-white);
      fill: var(--brand-main-light);
    }

    .text {
      color: var(--brand-main-light);
    }

    &:hover {
      border-color: var(--brand-main);

      .text {
        color: var(--brand-main);
      }

      .link-icon svg {
        fill: var(--brand-main);
      }
    }

    &:focus {
      border-color: var(--brand-main-active);

      .text {
        color: var(--brand-main-active);
      }

      .link-icon svg {
        fill: var(--brand-main-active);
      }
    }
  }

  &.transparent-background,
  &.black-background,
  &.blue-background,
  &.white-background {
    align-items: center;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    max-width: 278px;
    padding: 14px 12px;

    @include breakpoint($narrow) {
      padding: 15px 16px;
    }
    @include breakpoint($extrawide) {
      // with sidebar on page
      padding: 15px 16px;
    }
    @include breakpoint($xlarge) {
      // with sidebar on page
      padding: 17px 16px;
    }

    .text {
      @include font-size(16px, 16px); //button small

      @include breakpoint($narrow) {
        @include font-size(18px, 18px); //button medium
      }

      @include breakpoint($extrawide) {
        // with sidebar on page
        @include font-size(18px, 18px); //button medium
      }

      @include breakpoint($xlarge) {
        // with sidebar on page
        @include font-size(20px, 20px); //button large
      }
    }

    .link-icon {
      margin-left: 8px; //button small

      @include breakpoint($narrow) {
        margin-left: 10px; //button medium
      }

      @include breakpoint($extrawide) {
        margin-left: 10px; //button medium
      }

      @include breakpoint($xlarge) {
        margin-left: 12px; //button large
      }

      svg {
        height: 16px;
        width: 16px;

        @include breakpoint($narrow) {
          //button medium
          height: 18px;
          width: 18px;
        }

        @include breakpoint($extrawide) {
          //button medium
          height: 18px;
          width: 18px;
        }

        @include breakpoint($xlarge) {
          //button large
          height: 22px;
          width: 22px;
        }
      }
    }
  }
}

.hy-cta-button.large {
  @include breakpoint($extrawide) {
    padding: 17px 16px;
  }

  .text {
    @include breakpoint($extrawide) {
      @include font-size(20px, 20px); //button large
    }
  }

  .link-icon {
    @include breakpoint($extrawide) {
      margin-left: 12px; //button large
    }

    svg {
      @include breakpoint($extrawide) {
        //button large
        height: 22px;
        width: 22px;
      }
    }
  }

  &.blue-background,
  &.black-background {
    @include breakpoint($extrawide) {
      border-width: 4px;
    }
  }

  &.transparent-background {
    @include breakpoint($extrawide) {
      border-width: 4px;
    }
  }

  &.white-background {
    @include breakpoint($extrawide) {
      border-width: 4px;
    }
  }
}