@import 'mixins-keyframes';

$actionSize: 40px;

$sSizePadding: 8px;
$mSizePadding: 11px;

$buttonIconSize: 16px;

.ark-ui-button-wrapper {
  display: flex;

  &:hover,
  &.active {
    .ark-ui-button-action {
      border-color: #a3a7b9;
    }
  }
}

.ark-ui-button {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: .2s;
  color: #27282E;
  box-sizing: border-box;
  font-size: 14px;
  cursor: pointer;
  border: none;
  background: transparent;
  outline: unset;
  position: relative;

  &-action {
    width: $actionSize;
    height: $actionSize;
    box-sizing: border-box;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    left: -40px;
    position: absolute;
  
    cursor: pointer;
    border-radius: 4px;
    transition: .2s !important;
    background-color: #F6F6FA;
    border: 1px solid #D3D5E5;
  }

  &.m {
    padding: 0 $mSizePadding;
    height: 40px;
    min-width: 40px;

    .ark-ui-button-label {
      font-size: 14px;
      line-height: 16px;
      font-weight: 500;
    }

    &.with-action {
      padding-right: $actionSize + $mSizePadding
    }
  }

  &.s {
    padding: 0 $sSizePadding;
    height: 32px;
    min-width: 32px;
    font-size: 12px;

    .ark-ui-button-label {
      font-size: 12px;
      line-height: 16px;
      font-weight: 500;
    }

    &.with-action {
      padding-right: $actionSize + $sSizePadding
    }
  }

  &.primary {
    background-color: #8BDCE3;

    &:hover,
    &.active {
      background-color: #77D6DF;
    }

    &:disabled {
      background-color: #ECF9FA;
      color: #A3A7B9;
    }

    &.with-error {
      background-color: #F66161;
      color: #FFFFFF;
    }
  }

  &.secondary {
    border: 1px solid #D3D5E5;
    background-color: #FFFFFF;

    &:hover,
    &.active {
      border-color: #A3A7B9;
    }

    &:disabled {
      border-color: #F0F1F7;
      color: #A3A7B9;
    }

    &.with-error {
      border-color: #F66161;
      color: #F66161;
    }
  }

  &.tertiary {
    background-color: transparent;
    color: #585B69;

    &:hover,
    &.active {
      color: #27282E;
    }

    &:disabled {
      color: #A3A7B9;
    }

    &.with-error {
      color: #F66161;
    }
  }

  &.critical {
    background-color: #F66161;
    color: #FFFFFF;
    &:hover,
    &.active {
      background-color: #F54A4A;
    }
    &:disabled {
      background-color: #FFE8E8;
    }
    &.with-error {
      background-color: #F66161;
    }
  }

  .ark-ui-button-label {
    padding: 2px;
  }

  &.color {
    background-color: var(--color);

    &:hover {
      background-color: var(--colorHover);
    }

    &:disabled {
      background-color: var(--colorDisabled);
    }
  }

  &.with-icon {
    .ark-ui-button-label {
      margin-left: 4px;
    }

    .ark-ui-button-icon {
      height: $buttonIconSize;
    }
  }

  &:disabled {
    cursor: default;
  }

  &:has(.ark-ui-button-icon-loader) {
    pointer-events: none;

    .ark-ui-button-icon-loader {
      position: absolute;
      top: calc(50% - $buttonIconSize / 2);
      left: calc(50% - $buttonIconSize / 2);

      animation: rotate 1s infinite;
    }

    .ark-ui-button-label {
      opacity: 0;
    }
  }
}

.ark-ui-upload-area {
  .ark-ui-upload-drop-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    border: 1px dashed #D3D5E5;
    border-radius: 8px;
    padding: 16px;

    input[type="file"] {
      position: absolute;
      top: 0;
      cursor: pointer;
      height: 100%;
      width: 100%;
      opacity: 0;
    }

    .ark-ui-upload-drop-area-icon {
      background: url(document.svg) no-repeat center center #F6F6FA;
      border-radius: 50%;
      height: 32px;
      width: 32px;
    }

    .ark-ui-upload-drop-area-text {
      color: #27282E;
      font-size: 16px;
      line-height: 22px;
      margin: 12px 0 0;
    }

    .ark-ui-upload-drop-area-description {
      color: #A3A7B9;
      font-size: 12px;
      line-height: 16px;
      margin: 2px 0 0;
    }

    &:hover {
      background: #F6F6FA;
    }

    &.disabled {
      pointer-events: none;
      opacity: .5;
    }
  }

  .ark-ui-upload-files-box {
    padding-top: 16px;

    .ark-ui-upload-actions {
      display: flex;
      font-size: 14px;
      line-height: 16px;
      margin-bottom: 12px;

      .ark-ui-upload-file-count {
        margin: 0 32px 0 0;
      }

      .ark-ui-upload-button-delete {
        color: #919497;
        border: none;
        background-color: transparent;
        cursor: pointer;
        font-size: 14px;
        line-height: 16px;
        padding: 0;
      }
    }

    .ark-ui-upload-files {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;

      .ark-ui-upload-file {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        padding: 0 8px 8px;
        &:hover::after {
          position: absolute;
          left: 50%;
          bottom: 100%;
          transform: translateX(-50%);
          @include tooltip;
          min-width: 98px;
          max-width: 162px;
          word-break: break-word;
          text-align: center;
          white-space: break-spaces;
        }

        .ark-ui-upload-file-image {
          background-image: url(pdf.svg);
          background-color: #F6F6FA;
          background-position: center center;
          background-size: cover;
          background-repeat: no-repeat;
          border-radius: 4px;
          width: 66px;
          height: 66px;
          overflow: hidden;

          .ark-ui-upload-file-remove {
            position: absolute;
            background-color: #585B69;
            background-image: url(delete.svg);
            background-size: 6px 6px;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 50%;
            cursor: pointer;
            height: 12px;
            width: 12px;
            transition: 0.4s;
            right: 16px;
            top: 1px;
            opacity: 0;
          }
        }

        .ark-ui-upload-file-name {
          color: #585B69;
          font-size: 12px;
          line-height: 16px;
          width: 80px;
          text-align: center;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin: 8px 0 0;
          word-break: break-all;
        }

        &:hover {
          .ark-ui-upload-file-remove {
            opacity: 1;
          }
        }
      }

      .ark-ui-upload-downloadable-files {
        .ark-ui-upload-wrap {
          background: #F6F6FA;
          border-radius: 4px;

          .ark-ui-upload-file-image {
            background-image: url(./loading.svg);
            background-size: 24px 24px;
            background-repeat: no-repeat;
            background-color: transparent;
          }
        }

        .ark-ui-upload-file-name {
          color: #A3A7B9;
        }

        &.error {
          .ark-ui-upload-file-image {
            background-image: url(./error.svg);
            background-repeat: no-repeat;
            &.error-file {
              background-image: url(./error-file.svg);
              background-repeat: no-repeat;
            }
          }

          .ark-ui-upload-file-name {
            color: #F66161;
          }
        }
      }
    }
  }

  .ark-ui-upload-loading {
    border-color: #F0F1F7;
    margin-top: 9px;

    .ark-ui-upload-drop-area-text {
      line-height: 24px;
      margin-top: 0;
    }

    .ark-ui-upload-drop-area-description {
      margin-top: 0;

      &.error {
        color: #F66161;
      }
    }

    progress.styled {
      display: block;
      border-radius: 6px;
      width: 160px;
      height: 4px;
      margin-top: 16px;
    }

    progress.styled::-webkit-progress-bar {
      background-color: #D3D5E5;
      border-radius: 4px;
    }

    progress.styled::-webkit-progress-value {
      background-color: #8BDCE3;
      border-radius: 4px;
    }

    progress.styled::-moz-progress-bar {
      background-color: #8BDCE3;
      border-radius: 4px;
    }

    .ark-ui-upload-button-box {
      position: relative;
      display: flex;
      gap: 10px;
      margin-top: 16px;

      &:has(input) {
        border: 1px solid #D3D5E5;
        border-radius: 4px;

        .ark-ui-button {
          border: none;
        }
      }

      &:hover {
        border-color: #A3A7B9;
        cursor: pointer;
      }
    }

    &:hover {
      background-color: #fff;
      cursor: inherit;
    }
  }
}

.ark-ui-upload-button {
  position: relative;
  box-sizing: border-box;
  border: 1px dashed #D3D5E5;
  border-radius: 4px;
  max-width: var(--width);
  width: var(--width);

  input[type="file"] {
    position: absolute;
    top: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    opacity: 0;
  }

  &.m {
    padding: 12px 40px;
  }

  &.s {
    padding: 8px 35px;

    .loading .ark-ui-button-label {
      font-size: 12px;
      line-height: 16px;
    }
  }

  .ark-ui-button-label {
    color: #27282E;
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }

  .ark-ui-upload-button-icon {
    position: relative;
    width: 16px;
    height: 16px;
    border: none;
    padding: 0;
    margin-left: 8px;
    opacity: 0;

    &:hover {
      cursor: pointer;
    }
  }

  .success {
    display: flex;
    align-items: center;
    max-width: inherit;

    .ark-ui-upload-file {
      max-width: calc(100% - 24px);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ark-ui-button-label {
      color: #3A84FF !important;
      text-decoration: underline;
      font-weight: 400;
    }

    .ark-ui-upload-button-icon {
      background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcgNy41QzcgNy4yMjM4NiA2Ljc3NjE0IDcgNi41IDdDNi4yMjM4NiA3IDYgNy4yMjM4NiA2IDcuNVYxMi41QzYgMTIuNzc2MSA2LjIyMzg2IDEzIDYuNSAxM0M2Ljc3NjE0IDEzIDcgMTIuNzc2MSA3IDEyLjVWNy41WiIgZmlsbD0iI0EzQTdCOSIvPgo8cGF0aCBkPSJNMTAgNy41QzEwIDcuMjIzODYgOS43NzYxNCA3IDkuNSA3QzkuMjIzODYgNyA5IDcuMjIzODYgOSA3LjVWMTIuNUM5IDEyLjc3NjEgOS4yMjM4NiAxMyA5LjUgMTNDOS43NzYxNCAxMyAxMCAxMi43NzYxIDEwIDEyLjVWNy41WiIgZmlsbD0iI0EzQTdCOSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExIDJWM0gxM0MxMy41NTIzIDMgMTQgMy40NDc3MiAxNCA0VjVDMTQgNS41NTIyOCAxMy41NTIzIDYgMTMgNlYxNEMxMyAxNC41NTIzIDEyLjU1MjMgMTUgMTIgMTVINEMzLjQ0NzcyIDE1IDMgMTQuNTUyMyAzIDE0TDMgNkMyLjQ0NzcyIDYgMiA1LjU1MjI4IDIgNVY0QzIgMy40NDc3MiAyLjQ0NzcyIDMgMyAzSDVWMkM1IDEuNDQ3NzIgNS40NDc3MiAxIDYgMUgxMEMxMC41NTIzIDEgMTEgMS40NDc3MiAxMSAyWk02IDNWMkgxMFYzSDZaTTMgNEgxM1Y1SDNMMyA0Wk0xMiA2SDRWMTRIMTJWNloiIGZpbGw9IiNBM0E3QjkiLz4KPC9zdmc+Cg==) center center no-repeat;

      &:hover {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcgNy41QzcgNy4yMjM4NiA2Ljc3NjE0IDcgNi41IDdDNi4yMjM4NiA3IDYgNy4yMjM4NiA2IDcuNVYxMi41QzYgMTIuNzc2MSA2LjIyMzg2IDEzIDYuNSAxM0M2Ljc3NjE0IDEzIDcgMTIuNzc2MSA3IDEyLjVWNy41WiIgZmlsbD0iIzU4NUI2OSIvPgo8cGF0aCBkPSJNMTAgNy41QzEwIDcuMjIzODYgOS43NzYxNCA3IDkuNSA3QzkuMjIzODYgNyA5IDcuMjIzODYgOSA3LjVWMTIuNUM5IDEyLjc3NjEgOS4yMjM4NiAxMyA5LjUgMTNDOS43NzYxNCAxMyAxMCAxMi43NzYxIDEwIDEyLjVWNy41WiIgZmlsbD0iIzU4NUI2OSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExIDJWM0gxM0MxMy41NTIzIDMgMTQgMy40NDc3MiAxNCA0VjVDMTQgNS41NTIyOCAxMy41NTIzIDYgMTMgNlYxNEMxMyAxNC41NTIzIDEyLjU1MjMgMTUgMTIgMTVINEMzLjQ0NzcyIDE1IDMgMTQuNTUyMyAzIDE0TDMgNkMyLjQ0NzcyIDYgMiA1LjU1MjI4IDIgNVY0QzIgMy40NDc3MiAyLjQ0NzcyIDMgMyAzSDVWMkM1IDEuNDQ3NzIgNS40NDc3MiAxIDYgMUgxMEMxMC41NTIzIDEgMTEgMS40NDc3MiAxMSAyWk02IDNWMkgxMFYzSDZaTTMgNEgxM1Y1SDNMMyA0Wk0xMiA2SDRWMTRIMTJWNloiIGZpbGw9IiM1ODVCNjkiLz4KPC9zdmc+Cg==) center center no-repeat;
      }
    }
  }

  .error {
    display: flex;
    align-items: center;
    width: inherit;

    .ark-ui-button-label {
      color: #F66161;
      text-decoration: none;
      white-space: wrap;
      font-weight: 400;
    }

    .ark-ui-upload-button-icon {
      background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDMuNUM1LjQ5NzQ1IDMuNSAzLjUgNS41MTQ4NCAzLjUgOEMzLjUgOC4yNzYxNCAzLjI3NjE0IDguNSAzIDguNUMyLjcyMzg2IDguNSAyLjUgOC4yNzYxNCAyLjUgOEMyLjUgNC45NjUxNiA0Ljk0MjU1IDIuNSA4IDIuNUM5LjgxNTk2IDIuNSAxMS4xNzU0IDMuMjU5IDEyLjA3MDkgNC4wMDYwNUMxMi4yMjc3IDQuMTM2ODMgMTIuMzcwNyA0LjI2NzU4IDEyLjUgNC4zOTQzNlYzLjI4QzEyLjUgMy4wMDM4NiAxMi43MjM5IDIuNzggMTMgMi43OEMxMy4yNzYxIDIuNzggMTMuNSAzLjAwMzg2IDEzLjUgMy4yOFY1Ljc4QzEzLjUgNi4wNTYxNCAxMy4yNzYxIDYuMjggMTMgNi4yOEgxMC43OEMxMC41MDM5IDYuMjggMTAuMjggNi4wNTYxNCAxMC4yOCA1Ljc4QzEwLjI4IDUuNTAzODYgMTAuNTAzOSA1LjI4IDEwLjc4IDUuMjhIMTEuOTY4NEMxMS44MTcgNS4xMTk3NCAxMS42Mzc2IDQuOTQ2ODEgMTEuNDMwMyA0Ljc3Mzk1QzEwLjY1OTYgNC4xMzEgOS41MTkwNCAzLjUgOCAzLjVaTTEzIDcuNUMxMy4yNzYxIDcuNSAxMy41IDcuNzIzODYgMTMuNSA4QzEzLjUgMTEuMDM2MSAxMS4wMzYxIDEzLjUgOCAxMy41QzYuNDQ2MzYgMTMuNSA1LjIyMDA3IDEyLjcxODIgNC40MDY1OCAxMS45ODA0QzQuMjgwNDcgMTEuODY2IDQuMTYzMTkgMTEuNzUxNyA0LjA1NSAxMS42NDAyVjEyLjcyQzQuMDU1IDEyLjk5NjEgMy44MzExNCAxMy4yMiAzLjU1NSAxMy4yMkMzLjI3ODg2IDEzLjIyIDMuMDU1IDEyLjk5NjEgMy4wNTUgMTIuNzJWMTAuMjJDMy4wNTUgOS45NDM4NiAzLjI3ODg2IDkuNzIgMy41NTUgOS43Mkg1LjgxNUM2LjA5MTE0IDkuNzIgNi4zMTUgOS45NDM4NiA2LjMxNSAxMC4yMkM2LjMxNSAxMC40OTYxIDYuMDkxMTQgMTAuNzIgNS44MTUgMTAuNzJINC41NjQ4OUM0LjcxMTA3IDEwLjg4NDUgNC44ODI4MiAxMS4wNjIyIDUuMDc4NDIgMTEuMjM5NkM1Ljc5NzQzIDExLjg5MTggNi43OTM2NCAxMi41IDggMTIuNUMxMC40ODM5IDEyLjUgMTIuNSAxMC40ODM5IDEyLjUgOEMxMi41IDcuNzIzODYgMTIuNzIzOSA3LjUgMTMgNy41WiIgZmlsbD0iI0EzQTdCOSIvPgo8L3N2Zz4K) center center no-repeat;
      opacity: 1;

      &:hover {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDMuNUM1LjQ5NzQ1IDMuNSAzLjUgNS41MTQ4NCAzLjUgOEMzLjUgOC4yNzYxNCAzLjI3NjE0IDguNSAzIDguNUMyLjcyMzg2IDguNSAyLjUgOC4yNzYxNCAyLjUgOEMyLjUgNC45NjUxNiA0Ljk0MjU1IDIuNSA4IDIuNUM5LjgxNTk2IDIuNSAxMS4xNzU0IDMuMjU5IDEyLjA3MDkgNC4wMDYwNUMxMi4yMjc3IDQuMTM2ODMgMTIuMzcwNyA0LjI2NzU4IDEyLjUgNC4zOTQzNlYzLjI4QzEyLjUgMy4wMDM4NiAxMi43MjM5IDIuNzggMTMgMi43OEMxMy4yNzYxIDIuNzggMTMuNSAzLjAwMzg2IDEzLjUgMy4yOFY1Ljc4QzEzLjUgNi4wNTYxNCAxMy4yNzYxIDYuMjggMTMgNi4yOEgxMC43OEMxMC41MDM5IDYuMjggMTAuMjggNi4wNTYxNCAxMC4yOCA1Ljc4QzEwLjI4IDUuNTAzODYgMTAuNTAzOSA1LjI4IDEwLjc4IDUuMjhIMTEuOTY4NEMxMS44MTcgNS4xMTk3NCAxMS42Mzc2IDQuOTQ2ODEgMTEuNDMwMyA0Ljc3Mzk1QzEwLjY1OTYgNC4xMzEgOS41MTkwNCAzLjUgOCAzLjVaTTEzIDcuNUMxMy4yNzYxIDcuNSAxMy41IDcuNzIzODYgMTMuNSA4QzEzLjUgMTEuMDM2MSAxMS4wMzYxIDEzLjUgOCAxMy41QzYuNDQ2MzYgMTMuNSA1LjIyMDA3IDEyLjcxODIgNC40MDY1OCAxMS45ODA0QzQuMjgwNDcgMTEuODY2IDQuMTYzMTkgMTEuNzUxNyA0LjA1NSAxMS42NDAyVjEyLjcyQzQuMDU1IDEyLjk5NjEgMy44MzExNCAxMy4yMiAzLjU1NSAxMy4yMkMzLjI3ODg2IDEzLjIyIDMuMDU1IDEyLjk5NjEgMy4wNTUgMTIuNzJWMTAuMjJDMy4wNTUgOS45NDM4NiAzLjI3ODg2IDkuNzIgMy41NTUgOS43Mkg1LjgxNUM2LjA5MTE0IDkuNzIgNi4zMTUgOS45NDM4NiA2LjMxNSAxMC4yMkM2LjMxNSAxMC40OTYxIDYuMDkxMTQgMTAuNzIgNS44MTUgMTAuNzJINC41NjQ4OUM0LjcxMTA3IDEwLjg4NDUgNC44ODI4MiAxMS4wNjIyIDUuMDc4NDIgMTEuMjM5NkM1Ljc5NzQzIDExLjg5MTggNi43OTM2NCAxMi41IDggMTIuNUMxMC40ODM5IDEyLjUgMTIuNSAxMC40ODM5IDEyLjUgOEMxMi41IDcuNzIzODYgMTIuNzIzOSA3LjUgMTMgNy41WiIgZmlsbD0iIzU4NUI2OSIvPgo8L3N2Zz4K) center center no-repeat;
      }

      input[type="file"] {
        position: relative;
      }
    }
  }

  .loading {
    display: flex;

    .ark-ui-button-label {
      color: #A3A7B9;
      font-size: 14px;
      line-height: 16px;
      font-weight: 400;
      margin-left: 8px;
    }

    .ark-ui-upload-button-icon {
      background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDEzQzEwLjc2MTUgMTMgMTMgMTAuNzYxNSAxMyA4QzEzIDUuMjM4NDggMTAuNzYxNSAzIDggM0M1LjIzODQ4IDMgMyA1LjIzODQ4IDMgOEMzIDEwLjc2MTUgNS4yMzg0OCAxMyA4IDEzWk04IDE0QzExLjMxMzggMTQgMTQgMTEuMzEzOCAxNCA4QzE0IDQuNjg2MiAxMS4zMTM4IDIgOCAyQzQuNjg2MiAyIDIgNC42ODYyIDIgOEMyIDExLjMxMzggNC42ODYyIDE0IDggMTRaIiBmaWxsPSIjRDNENUU1Ii8+CjxwYXRoIGQ9Ik0xMi45NzU0IDcuNTAwN0MxMi43NDExIDUuMTM3ODYgMTAuODYyMSAzLjI1ODg2IDguNDk5MyAzLjAyNDYyQzguMjI0NSAyLjk5NzM3IDggMi43NzYxNCA4IDIuNUM4IDIuMjIzODYgOC4yMjQ2NCAxLjk5NzgzIDguNDk5ODUgMi4wMjA1MkMxMS40MTQ5IDIuMjYwOTIgMTMuNzM5MSA0LjU4NTA1IDEzLjk3OTUgNy41MDAxNUMxNC4wMDIyIDcuNzc1MzYgMTMuNzc2MSA4IDEzLjUgOEMxMy4yMjM5IDggMTMuMDAyNiA3Ljc3NTQ5IDEyLjk3NTQgNy41MDA3WiIgZmlsbD0iIzI3MjgyRSIvPgo8L3N2Zz4K) center center no-repeat;
      animation: 1s linear infinite rotate;
      cursor: inherit;
      opacity: 1;
    }
  }

  &:has(.success), &:has(.error), &:has(.loading) {
    justify-content: flex-start;
    border: transparent;
    cursor: inherit;
    padding-left: 0;
    padding-right: 0;
  }

  &:has(.success), &:has(.error) {
    .ark-ui-upload-button-icon:hover::after, .ark-ui-button-label:hover::after {
      top: -20px;
      left: 25px;
      @include tooltip;
    }
  }

  &:has(.loading) {
    flex-direction: column;

    .ark-ui-upload-button-icon {
      margin-left: 0;
    }
  }

  &:has(.success) {
    .ark-ui-button-label:hover::after {
      left: 0;
      top: 35px;
      white-space: break-spaces;
    }
  }

  &:hover {
    border-color: #585B69;

    .success .ark-ui-upload-button-icon {
      opacity: 1;
    }
  }

  &:disabled {
    pointer-events: none;

    .ark-ui-button-label {
      color: #D3D5E5;
    }
  }

  &.fileAvailable {
    .ark-ui-upload-file {
      pointer-events: all !important;
    }

    .ark-ui-upload-button-icon {
      display: none !important;
    }
  }
}

.ark-ui-upload-button-description {
  margin-top: 4px;

  font-size: 12px;
  font-weight: 400;
  color: #A3A7B9;
  white-space: nowrap;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}