// vf-social-links

// **Thinking about deleting this file?**
// If your component needs no CSS/Sass, we still recommend leaving the
// scss files in place. As this is primarily a CSS framework, it is better to
// leave the empty files so you know a file wasn't accidently omitted.
// If you don't have any Sass, you can trim this block down to:
// "This page was intentionally left blank"

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-social-links.variables.scss';


.vf-social-links__heading {
  @include set-type(text-heading--4);

  color: ui-color(black);
}

.vf-social-links__list {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.vf-social-links__item {
  background: ui-color(black);
  margin-left: 12px;

  &:first-child {
    margin-left: 0;
  }

  &:hover {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
  }
}

.vf-social-links__link {
  align-items: center;
  display: flex;
  padding: 10px;

  &:focus {
    outline: 3px solid var(--vf-color--blue);
  }

  .vf-icon--social {
    fill: ui-color(white);
  }
}


.vf-social-links--outline {

  .vf-social-links__item {
    background-color: transparent;;
    border: 1px solid ui-color(black);
    box-sizing: border-box;

    &:hover {
      background-color: ui-color(black);

      .vf-icon--social {
        fill: ui-color(white);
      }
    }
  }

  .vf-icon--social {
    fill: ui-color(black);
  }
}

[class*='dark-mode'] {

  .vf-social-links__heading {
    color: ui-color(white);
  }

  .vf-social-links__item {
    background-color: ui-color(white);
  }

  .vf-icon--social {
    fill: ui-color(black);
  }

  .vf-social-links--outline {
    .vf-social-links__item {
      background-color: transparent;
      border: 1px solid ui-color(white);
      box-sizing: border-box;

      &:hover {
        border-color: ui-color(black);
        box-shadow: none;
        /* stylelint-disable */
        .vf-icon--social {
          fill: ui-color(black);
        }
        /* stylelint-enable */
      }
    }

    .vf-icon--social {
      fill: ui-color(white);
    }
  }
}