// Shaped & bordered Icons
// -------------------------

/* Border */
.#{$lk-css-prefix}-border {
  border: solid .08em currentColor;
  border-radius: .1em;
  padding: .2em .25em .15em;
}

.#{$lk-css-prefix}-rounded {
  border-radius: .25em;
}

.#{$lk-css-prefix}-shape-square,
.#{$lk-css-prefix}-shape-diamond,
.#{$lk-css-prefix}-shape-circle {
    padding: .5em !important;
    border-width: .2em !important;
    border-style: solid;
    border-color: currentColor;
    height: var(--square);
    width: var(--square);
    align-items: center;
    justify-content: center;
}

.#{$lk-css-prefix}-shape-circle {
  border-radius: 50% !important;
}

.#{$lk-css-prefix}-shape-square,
.#{$lk-css-prefix}-shape-diamond {
  &:not(.#{$lk-css-prefix}-rounded) {
    border-radius: 0 !important;
  }
}

.#{$lk-css-prefix}-shape-square,
.#{$lk-css-prefix}-shape-diamond,
.#{$lk-css-prefix}-shape-circle {
  &:not(.#{$lk-css-prefix}-border) {
    padding: .7em;
    border: none;
    background: currentColor;
  }
}

.#{$lk-css-prefix}-shape-diamond {
  padding: .3em !important;
  transform: rotate(45deg);
  margin: 0 .4em;

  &:not(.#{$lk-css-prefix}-border) {
    padding: .5em;
  }

  &::before {
    transform: rotate(-45deg);
  }
}

.#{$lk-css-prefix}-shape-hexagon {
  position: relative;
  width: 2.75em;
  height: 2.75em;
  vertical-align: -1.125em;

  &::before {
    position: absolute;
    left: calc(50% - var(--width) / 2);
    top: calc(50% - .5em);
    z-index: 1;
  }

  &::after {
    --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><path d="M29.775 1.28L47.87 11.726a5.434 5.434 0 012.717 4.706V37.33a5.434 5.434 0 01-2.717 4.706L29.775 52.483a5.434 5.434 0 01-5.434 0L6.245 42.036a5.434 5.434 0 01-2.718-4.706V16.433a5.434 5.434 0 012.718-4.706L24.34 1.279a5.434 5.434 0 015.434 0z"/></svg>');
    content: '';
    background-color: currentColor;
    display: inline-block;
    line-height: 1;
    mask-image: var(--icon);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 2.75em;
    height: 2.75em;
    -webkit-mask-image: var(--icon);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    position: absolute;
    left: calc(50% - 1.375em);
    top: calc(50% - 1.375em);
  }

  &:not(.#{$lk-css-prefix}-rounded)::after {
    --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><path d="M27.105 53.425L3.63 40.225l-.084-26.54L26.937.344l23.476 13.199.084 26.54z"/></svg>');
  }

  &.#{$lk-css-prefix}-border {
    padding: 0;
    border: none;

    &::after {
      --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><path d="M27.006.146a6.72 6.72 0 00-3.361.899L6.262 11.082a6.728 6.728 0 00-3.362 5.82v20.075a6.728 6.728 0 003.362 5.82l17.383 10.037a6.727 6.727 0 006.72 0L47.75 42.797a6.726 6.726 0 003.36-5.82V16.902a6.726 6.726 0 00-3.36-5.82L30.365 1.045a6.713 6.713 0 00-3.36-.899zm0 2.999c.642 0 1.283.165 1.86.498L46.25 13.68a3.715 3.715 0 011.86 3.222v20.075a3.715 3.715 0 01-1.86 3.222L28.865 50.234a3.715 3.715 0 01-3.72 0L7.762 40.2A3.717 3.717 0 015.9 36.977V16.902c0-1.331.709-2.557 1.862-3.222L25.145 3.643a3.72 3.72 0 011.86-.498z"/></svg>');
    }

    &:not(.#{$lk-css-prefix}-rounded)::after {
      --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><path d="M26.936.5L3.68 13.762l.085 26.386 23.34 13.125.923-.527L50.36 40.007l-.082-26.386zm.014 4.187l19.637 11.04.069 22.2L27.09 49.085 7.456 38.046l-.072-22.2z" /></svg>');
    }
  }
}