@use "@styles/abstracts/functions" as fun;

.link {
  display: flex;
  width: var(--link-size, #{fun.convert-px(60)});
  height: var(--link-size, #{fun.convert-px(60)});
  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
      var(--color-shadow),
    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
      var(--color-shadow),
    fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
      var(--color-shadow),
    0 0 0 0 var(--color-shadow);
  transition: all 0.25s linear 0s;

  &:hover,
  &:focus {
    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
        var(--color-shadow),
      fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
        var(--color-shadow-light),
      fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
        var(--color-shadow-light),
      fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
        var(--color-shadow);
    transform: scale(1.15);
  }

  &:focus {
    outline: var(--color-primary) dashed fun.convert-px(2);
  }

  &:active {
    box-shadow: 0 0 0 0 var(--color-shadow);
    outline: none;
    transform: scale(0.9);
  }
}

.icon {
  max-width: 100%;
  max-height: 100%;
}