@use 'variables' as *;

.fat-image-verify-code {
  margin: 5px auto;
  position: relative;
  user-select: none;
  font-size: 14px;

  &__bg {
    width: 100%;
    overflow: hidden;

    img {
      object-fit: fill;
    }
  }

  &__clip {
    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
    filter: drop-shadow(0px 1px 3px white);
    &:active {
      cursor: grabbing;
    }
  }

  &__slider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 40px;
    background: $fat-color-gray-100;
    color: $fat-color-gray-800;
    border: 1px solid $fat-color-gray-400;
    box-sizing: border-box;
  }

  &__slider-control {
    position: absolute;
    left: -1px;
    top: -1px;
    max-width: 100%;
    height: 100%;
    border: 1px solid $fat-color-gray-400;
    display: flex;
    align-items: center;
    box-sizing: content-box;

    &:active {
      border-color: $fat-color-info;
    }
  }

  &__slider-progress {
    height: 100%;
    background: $fat-color-info-300;
    max-width: calc(100% - 40px);
  }

  &__slider-bar {
    width: 40px;
    height: 100%;
    cursor: grab;
    background: white
      url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAfJJREFUOE+1Uz2LE1EUPXcmSIr9A4Juta1gYbuCtYWFEJDk3jfuRHQtVGxEcdFiFTtRQVeQhHk3fs0WWmplo42oIAoWVra2giSE5MpbkmX2I5lF11sNjznnnXfOuYRdHtplPvxfQlVdZOYHm1V77xMAH0Tka9mL1hWq6pyZfQdwW0QuFoHe+zcAZs2s6ZwL3xNnw5NV9aiZPQHwslqtLtRqtUFAZlk2G0WRmtlBAE0RWZ3EuMVDVZ03s8cAvgA4KSI/AzjP8z3dbjdcdnw4HJ5NkmSLNeG/bUNpt9sH4jh+CuA3ACci38aKvPeB6AyAJRFZ3qx0YsqdTmffYDDIiWivmbFz7u0YnGXZdSK6ZmZ3nHMXiqRTa5Pn+Uyv18vN7HAURdxoNF6Mwap62sxWiKjDzDw+L+2hqp4YBXVPRM6NgSNPcwDHRGSdZyph6KWZ3Seih8wcfFubVqu1v1KpPDezOSJiEXldqtB7fxnATQDLIrJUCOUQgGcAukQkzPyp1ENVvWVmlwCcF5G7Bd9CT0P6H+M4Tur1+o/SlEMtiKgJIGHm0Me18d6nAB4BWO33+2mapr+2K/cGD733geAIES0w86tCTa4Q0Q0AKyKyuOPV895/NrNTzrn3RdBol9+JyNVpZBM3pQy0Y4X/QlRam78l/wOAq88VF0BWMQAAAABJRU5ErkJggg==)
      no-repeat center;

    &:active {
      cursor: grabbing;
    }
  }

  &__refresh {
    font-size: 20px;
    cursor: pointer;
    color: white;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0.8;

    &:hover {
      opacity: 1;
    }
  }
}