@use "./mixins" as *;

.mask {
  --mask-size: 16px;

  &--clipboard {
    @include mask(url("./images/16_clipboard.svg"), var(--mask-size));
  }

  &--arrow-right {
    @include mask(url("./images/24_arrow-right.svg"), var(--mask-size));
  }

  &--attention {
    @include mask(url("./images/16_attention.svg"), var(--mask-size));
  }

  &--chevron-right {
    @include mask(url("./images/16_chevron-right.svg"), var(--mask-size));
  }

  &--chevron-left {
    @include mask(url("./images/16_chevron-left.svg"), var(--mask-size));
  }

  &--checkmark {
    @include mask(url("./images/16_checkmark.svg"), var(--mask-size));
  }

  &--link {
    @include mask(url("./images/16_link.svg"), var(--mask-size));
  }

  &--import {
    @include mask(url("./images/16_import.svg"), var(--mask-size));
  }

  &--add {
    @include mask(url("./images/16_add.svg"), var(--mask-size));
  }

  &--play {
    @include mask(url("./images/16_play.svg"), var(--mask-size));
  }

  &--loader {
    @include mask(url("./images/16_loading.svg"), var(--mask-size));
  }

  &--compare {
    @include mask(url("./images/16_compare.svg"), var(--mask-size));
  }

  &--paper-clip-large {
    --mask-size: 24px;
    @include mask(url("./images/24_paper-clip.svg"), var(--mask-size));
  }

  &--search-large {
    --mask-size: 24px;
    @include mask(url("./images/24_search.svg"), var(--mask-size));
  }

  &--close-large {
    --mask-size: 24px;
    @include mask(url("./images/24_close.svg"), var(--mask-size));
  }

  &--code-large {
    --mask-size: 24px;
    @include mask(url("./images/24_code.svg"), var(--mask-size));
  }

  &--settings-2 {
    --mask-size: 24px;
    @include mask(url("./images/24_settings-2.svg"), var(--mask-size));
  }

  &--filters {
    --mask-size: 24px;
    @include mask(url("./images/24_filters.svg"), var(--mask-size));
  }

  &--columns {
    --mask-size: 24px;
    @include mask(url("./images/24_columns.svg"), var(--mask-size));
  }

  &--local {
    --icon-size: 24px;
    @include mask(url("./images/24_local.svg"), var(--icon-size));
  }

  &--server-on {
    --icon-size: 24px;
    @include mask(url("./images/24_server-on.svg"), var(--icon-size));
  }

  /* Deprecated */

  &--paper-clip {
    --mask-size: 24px;
    @include mask(url("./images/24_paper-clip.svg"), var(--mask-size));
  }

  &--search {
    --mask-size: 24px;
    @include mask(url("./images/24_search.svg"), var(--mask-size));
  }

  &--close {
    --mask-size: 24px;
    @include mask(url("./images/24_close.svg"), var(--mask-size));
  }

  /* End of deprecated */
}