.slide-mask
{
  overflow: hidden;
  width: 100%;
  height: auto;

  .slides
  {
    white-space: nowrap;
    position: relative;
    left: 0;

    &.scroll
    {
      -ms-overflow-style: none;  /* Internet Explorer 10+ */
      scrollbar-width: none;  /* Firefox */

      &::-webkit-scrollbar {
        display: none;  /* Safari and Chrome */
      }
    }

    > *
    {
      display: inline-block;
      width: 100%;
      overflow: hidden;

      *
      {
        white-space: normal;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        user-drag: none;
        -webkit-touch-callout: none;
      }
    }
  }
}

.caroussel
{
  position: relative;

  .pager button
  {
    box-sizing: content-box;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    width: 2em;
    height: 2em;
    z-index: 2;

    svg
    {
      width: 100%;
      height: 100%;
      transform: rotate(90deg);
      // width: 2em;
      // height: 2em;

      path
      {
        transition: fill 0.4s ease-out;
        fill: white;
      }
    }

    &:hover
    {
      svg path
      {
        fill: black;
      }
    }

    &:first-child
    {
      left: 1rem;
      right: auto;

      svg
      {
        transform: rotate(-90deg);
      }
    }

    &:not(.active)
    {
      display: none;
    }
  }

  .pages
  {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;

    a
    {
      display: inline-block;
      width: .75em;
      height: .75em;
      margin: 0 0.25em;
      background-color: rgba(256,256,256,0.1);
      border-radius: 100%;
      box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
      transition: background-color 0.4s ease-out;
      cursor: pointer;

      &.active
      {
        background-color: white;
      }
    }
  }
}