Skip to content
Snippets Groups Projects
hy-footer-link-item.scss 1.56 KiB
Newer Older
  • Learn to ignore specific revisions
  • Tuukka Turu's avatar
    Tuukka Turu committed
    :host {
      display: block;
    }
    
    hy-footer-link-item {
      width: 100%;
    
      @include breakpoint($medium) {
        width: 50%;
      }
    }
    
    .hy-footer-link-item--container {
      display: flex;
      flex-direction: column;
    
      .hy-footer-link-item:last-child {
        margin-bottom: 14px;
      }
    }
    
    .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($medium) {
        margin-left: 0px;
        margin-right: 24px;
        padding: 15px 20px 15px 0;
      }
    
      @include breakpoint($wide) {
        margin-left: 32px;
        margin-right: 0;
        padding: 15px 20px 15px 0;
      }
    
      &__color-white {
        border-bottom: 1px solid var(--grayscale-white);
        color: var(--grayscale-white);
    
        .hy-footer-link-item__icon svg {
          fill: var(--grayscale-white);
        }
      }
    
      &__color-black {
        border-bottom: 1px solid var(--grayscale-medium);
        color: var(--grayscale-nearly-black);
    
        .hy-footer-link-item__icon svg {
          fill: var(--grayscale-black);
        }
      }
    
      &__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;
          }
        }
      }
    
      &__icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }