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

.list {
  @extend %flex-list;

  gap: var(--spacing-xs);
  align-items: center;
}

.link {
  display: block;
  width: 3em;
  height: 3em;
  background: none;
  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
      var(--color-shadow-light),
    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
      var(--color-shadow-light),
    fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
      var(--color-shadow-light),
    0 0 0 0 var(--color-shadow);
  transition: all 0.3s linear 0s;

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

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

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