:host {
  display: block;
}

hy-footer-link-item:not([main-link]) {
  width: 100%;

  @include breakpoint($narrow) {
    width: 50%;
  }
}

hy-footer-link-item[main-link] {
  width: 100%;

  @include breakpoint($narrow) {
    max-width: 30%;
  }
}

.hy-footer-link-item--container {
  display: flex;
  flex-direction: column;

  .hy-footer-link-item:last-child {
    margin-bottom: 16px;
  }
}

.hy-footer-link-item {
  @include font-size(14px, 16px);

  display: flex;
  font-family: var(--main-font-family);
  font-weight: 600;
  letter-spacing: -0.44px;
  margin-left: 0;
  margin-right: 0;
  padding: 15px 20px 15px 0;
  position: relative;
  text-decoration: none;

  @include breakpoint($narrow) {
    margin-left: 0;
    margin-right: 24px;
    padding: 15px 20px 15px 0;
  }

  @include breakpoint($wide) {
    margin-left: 32px;
    margin-right: 0;
    padding: 15px 20px 15px 0;
  }

  @include breakpoint($xlarge) {
    margin-left: 48px;
  }

  &__color-white {
    border-bottom: 1px solid var(--grayscale-white);
    color: var(--grayscale-white);

    .hy-footer-link-item__icon svg {
      fill: var(--grayscale-white);
    }

    &:hover {
      color: var(--grayscale-medium) !important;
      svg {
        fill: var(--grayscale-medium);
      }
    }
  }

  &__color-black {
    border-bottom: 1px solid var(--grayscale-medium);
    color: var(--grayscale-nearly-black);

    .hy-footer-link-item__icon svg {
      fill: var(--grayscale-black);
    }

    &:hover {
      color: var(--brand-main) !important;
      text-decoration: underline;
      svg {
        fill: var(--brand-main);
      }
    }
  }

  &__main {
    border: 0;
    padding: 0;
    margin-right: -32px;

    .hy-heading__container > h3.hy-heading {
      padding: 0 0 1px 0 !important;

      .hy-footer-link-item__link {
        color: var(--grayscale-nearly-black);
        font-family: var(--main-font-family);
        text-decoration: none;
        margin-bottom: 12px;
      }
    }
  }

  &__icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  &:hover {
    h3 a {
      color: var(--brand-main) !important;
    }
  }
}