liebling/src/sass/components/ui/_icon-button.scss

.m-icon-button {
  color: var(--titles-color);
  font-size: 1.125rem;
  border: 0;
  outline: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  background-color: transparent;
  @extend .content-centered;
  @extend .no-appearance;
  @extend .focusable;

  &.outlined {
    border: 1px solid var(--primary-foreground-color);
  }

  &.filled {
    background-color: var(--background-color);
    @include bs(0 2px 4px var(--button-shadow-color-normal));
    @include transition(all .25s cubic-bezier(.02,.01,.47,1));

    &:hover {
      @include bs(0 4px 8px var(--button-shadow-color-hover));
    }
  }

  &:disabled {
    cursor: default;
    opacity: 0.5;
  }

  &.in-mobile-topbar {
    width: 65px;
    height: 100%;
  }

  &.as-close-menu {
    position: absolute;
    top: $mobile-space;
    right: $mobile-space;
    width: 32px;
    height: 32px;
    font-size: 0.625rem;
    z-index: 2;

    @include respond-to('medium') {
      display: none !important;
    }
  }

  &.as-close-search {
    position: absolute;
    top: $mobile-space;
    right: $mobile-space;
    width: 32px;
    height: 32px;
    font-size: 0.625rem;
    z-index: 2;

    @include respond-to('medium') {
      top: 30px;
      right: 30px;
      width: 42px;
      height: 42px;
      font-size: 0.875rem;
    }

    @include respond-to('extra-large') {
      top: 40px;
      right: 40px;
      width: 50px;
      height: 50px;
    }
  }

  &.in-menu-main {
    display: none;

    @include respond-to('medium') {
      display: flex;
      width: 26px;
      height: 25px;
    }
  }

  &.more {
    font-size: 6px;
    z-index: 6;
    position: relative;

    &.active {
      color: var(--primary-subtle-color);
    }
  }

  &.in-pagination-left,
  &.in-pagination-right {
    width: 40px;
    height: 40px;
    font-size: 0.625rem;

    @include respond-to('medium') {
      width: 46px;
      height: 46px;
      font-size: 0.688rem;
    }
  }

  &.in-pagination-left {
    margin-right: 30px;
  }

  &.in-pagination-right {
    margin-left: 30px;
  }

  &.in-featured-articles {
    position: absolute;
    color: $white;
    font-size: 0.875rem;
    width: 40px;
    height: 40px;
    bottom: 5px;
    z-index: 2;

    @include respond-to('medium') {
      bottom: 26px;
    }

    &.glide-prev {
      right: 56px;

      @include respond-to('medium') {
        right: 76px;
      }
    }

    &.glide-next {
      right: 16px;

      @include respond-to('medium') {
        right: 36px;
      }
    }
  }

  &.in-recommended-articles {
    position: absolute;
    font-size: 0.625rem;
    width: 40px;
    height: 40px;
    top: 200px;
    z-index: 2;
    @include transform(translateY(-50%));

    @include respond-to('large') {
      display: none;
    }

    &.glide-prev {
      left: 0;
    }

    &.glide-next {
      right: 0;
    }
  }

  &.as-load-comments {
    position: relative;
    width: 60px;
    height: 60px;
    font-size: 1.250rem;
    margin: 0 auto;
    z-index: 2;

    @include respond-to('medium') {
      width: 80px;
      height: 80px;
      font-size: 1.625rem;
    }
  }

  &.in-share {
    color: var(--titles-color);
    font-size: 0.750rem;
    text-decoration: none;
    width: 31px;
    height: 31px;
    margin: 0 25px;

    @include respond-to('large') {
      font-size: 0.875rem;
      width: 40px;
      height: 40px;
      margin: 0 0 20px 0;
    }

    @include respond-to('extra-large') {
      font-size: 1rem;
      width: 50px;
      height: 50px;
    }
  }

  &.progress {
    position: relative;

    svg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;

      circle {
        stroke: var(--primary-subtle-color);
        transform-origin: 50% 50%;
        @include transform(rotate(-90deg));
        @include transition(stroke-dashoffset 0.2s);
      }
    }
  }
}

.rtl {
  .m-icon-button {
    &.in-featured-articles {
      &.glide-prev {
        right: auto;
        left: 16px;

        @include respond-to('medium') {
          right: auto;
          left: 36px;
        }
      }

      &.glide-next {
        right: auto;
        left: 52px;

        @include respond-to('medium') {
          right: auto;
          left: 72px;
        }
      }
    }

    &.in-recommended-articles {
      &.glide-prev {
        left: auto;
        right: 0;
        @include transform(rotate(180deg));
      }

      &.glide-next {
        right: auto;
        left : 0;
        @include transform(rotate(180deg));
      }
    }
  }
}