/* THEME CLASSES
   -------------------------------------------------------------------------------------------------------------------------------------------- */


   .#{ $theme-prefix }-addon-right {
    position: relative;

    input {
      padding-right: 35px;
    }

    [class*="icon"] {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: $secondary;
      font-size: 20px;
    }
  }

  .#{ $theme-prefix }-input {
    visibility: hidden;

    &--checkbox:checked + label::after {
      display: inline-block;
    }

    &--radio:checked + label::after {
      display: inline-block;
    }

    &:disabled + label {
      color: $secondary;
      cursor: not-allowed;

      &::before {
        border-color: $secondary;
      }
    }
  }


  .#{ $theme-prefix }-input-label {
    position: relative;
    padding-left: 30px;
    margin-left: -20px;
    cursor: pointer;

    &::before {
      content: "";
      display: block;
      height: 20px;
      width: 20px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      border: 2px solid $primary;
    }

    &::after {
      @include fontawesome;
      display: block;
      height: 20px;
      width: 20px;
      position: absolute;
      left: 1px;
      top: 27%;
      transform: translateY(-50%);
      font-size: 22px;
      color: $primary;
      display: none;
    }

    &--checkbox {
      &::before {
        border-radius: 3px;
      }

      &::after {
        content: "\f14a";
      }
    }

    &--radio {
      &::before {
        border-radius: 50%;
      }

      &::after {
        content: "\f058";
      }
    }

  }

  .#{ $theme-prefix }-icon {
    font-size: 20px;
  }

  .#{ $theme-prefix }-accordion-container {
    overflow: auto;
    padding-right: 10px;
    padding-bottom: 40px;
    padding-top: 40px;
  }

  .#{ $theme-prefix }-table {
    &-header {
      padding: 8px;
      border-bottom: 2px solid $secondary;
    }
    &__row {
      display: flex;
      width: 100%;
    }
    &__col {
      flex-grow: 1;

      &-1 {
        width: 100%;
      }
      &-2 {
        width: calc(100% / 2);
      }
      &-3 {
        width: calc(100% / 3);
      }
      &-4 {
        width: calc(100% / 4);
      }
      &-5 {
        width: calc(100% / 4);
      }
    }
  }

  // LOADING KEYFRAMES
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(19px, 0);
    }
  }

  .#{ $theme-prefix }-loading {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;

    div {
      position: absolute;
      top: 27px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: $primary;
      animation-timing-function: cubic-bezier(0, 1, 1, 0);

      &:nth-child(1) {
        left: 6px;
        animation: lds-ellipsis1 0.6s infinite;
      }
      &:nth-child(2) {
        left: 6px;
        animation: lds-ellipsis2 0.6s infinite;
      }
      &:nth-child(3) {
        left: 26px;
        animation: lds-ellipsis2 0.6s infinite;
      }
      &:nth-child(4) {
        left: 45px;
        animation: lds-ellipsis3 0.6s infinite;
      }
    }
  }

  .btn-secondary {
    color: white !important;
  }
