// vf-bookmark

// **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')}
 * Build time: #{map-get($componentInfo, 'buildTimeStamp')}
 */

@import 'vf-bookmark.variables.scss';

// You need to add this Sass file to ./components/vf-componenet-rollup/index.scss
// @import 'vf-bookmark/vf-bookmark.scss';
// .vf-bookmark {
  // You can utilise CSS custom properites
  // --thing-text-color: var(--vf-bookmark-theme-color--foreground, #{set-ui-color(vf-ui-color--black)});

  // The are many mixins:
  // https://stable.visual-framework.dev/components/detail/vf-sass-config.html
  // @include set-type(text-body--2);

  // You can also use the design tokens
  // https://stable.visual-framework.dev/components/detail/vf-design-tokens.html
  // --otherthing-color: var(--vf-bookmark-theme-color--foreground, #{map-get($vf-colors-map, vf-color--green--darkest)});
  // color: var(--otherthing-color);
// }

.vf-bookmark--icon {
  // align-items: center;
  // border-bottom: none;
  color: ui-color(white);
  line-height: 1rem;
  stroke: color(blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  vertical-align: middle;

  svg {
    fill: currentColor;
    height: 1.25rem;
    line-height: 1.2rem;
    margin-right: .4rem;
    overflow: initial;
    width: 1.25rem;
    // flex: 1 0 auto;
    // margin-left: map-get($vf-spacing-map, vf-spacing--200);
  }
}

.vf-bookmark--active .vf-bookmark--icon {
  color: color(blue); // IE11 fallback
  color: inherit;
  stroke: none;
}

.vf-bookmark--button svg {
  vertical-align: text-top;
}
.vf-bookmark--inline svg {
  vertical-align: bottom;
}