@appscode/design-system 1.1.0 → 2.0.1

package/components/_buttons.scss

@@ -1,779 +1,779 @@
-.button {
-  transition: 86ms ease-in-out;
-
-  // ac-button
-  &.ac-button {
-    border-color: $ac-primary;
-    border-radius: 4px;
-    font-size: 14px;
-    font-family: $ac-family-paragraph;
-    letter-spacing: 0.2px;
-    color: $ac-primary;
-    font-weight: 500;
-    height: 36px;
-    padding-left: 25px;
-    padding-right: 25px;
-    line-height: 1;
-    &:focus-visible {
-      outline: none;
-    }
-
-    &:hover {
-      border-color: hsla(
-        var(--hsl-hue),
-        var(--hsl-saturation),
-        calc(var(--hsl-lightness) - 9%),
-        1
-      );
-      color: hsla(
-        var(--hsl-hue),
-        var(--hsl-saturation),
-        calc(var(--hsl-lightness) - 9%),
-        1
-      );
-    }
-
-    &.underline-button {
-      text-decoration-line: underline;
-      border: none;
-      padding: 0;
-      height: unset;
-      letter-spacing: 1px;
-
-      &.is-primary {
-        color: $ac-primary;
-        background-color: transparent;
-
-        &:hover {
-          background-color: unset;
-        }
-      }
-    }
-
-    &.is-disabled {
-      opacity: 0.5 !important;
-    }
-
-    &.is-rounded {
-      border-radius: 9999px;
-    }
-
-    .ac-icon {
-      margin-left: 25px;
-      background-color: $ac-white;
-      color: $ac-primary;
-      padding: 2px 6px;
-      border-radius: 4px;
-      width: 20px;
-      height: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-    }
-
-    &.is-small {
-      height: 36px;
-      font-size: 13px;
-      letter-spacing: 0px;
-      font-weight: 500;
-      padding-left: 25px;
-      padding-right: 25px;
-    }
-
-    &.is-extra-small {
-      height: 32px;
-      font-size: 12px;
-      letter-spacing: 0px;
-      font-weight: 500;
-      padding-left: 20px;
-      padding-right: 20px;
-    }
-
-    &.is-tiny {
-      height: 28px;
-      font-size: 11px;
-      letter-spacing: 0px;
-      font-weight: 400;
-      padding-left: 15px;
-      padding-right: 15px;
-      line-height: 1;
-    }
-    &.is-extra-tiny {
-      height: 22px;
-      font-size: 11px;
-      letter-spacing: 0px;
-      font-weight: 400;
-      padding-left: 10px;
-      padding-right: 10px;
-      line-height: 1;
-    }
-    &.is-normal {
-      height: 45px;
-      font-size: 15px;
-      letter-spacing: 0px;
-      font-weight: 500;
-      padding-left: 25px;
-      padding-right: 25px;
-    }
-
-    &.is-medium {
-      height: 58px;
-      font-size: 18px;
-      padding-left: 45px;
-      padding-right: 45px;
-    }
-
-    &.is-large {
-      height: 48px;
-      font-size: 16px;
-      padding-left: 45px;
-      padding-right: 45px;
-    }
-
-    &.is-square {
-      width: 52px;
-      height: 52px;
-      padding: 0;
-      &:hover {
-        svg {
-          color: $ac-white;
-        }
-      }
-      &.is-gray {
-        background-color: $ac-white-light;
-        color: $ac-gray-lightest;
-        border-color: transparent;
-
-        img {
-          width: 16px;
-        }
-
-        i.fa {
-          font-size: 18px;
-          color: $ac-gray-lightest;
-        }
-
-        &:hover {
-          background-color: $ac-gray-lightest;
-        }
-      }
-
-      &.is-outlined-gray {
-        border: 1px solid $ac-white-light;
-        font-size: 15px;
-      }
-
-      &.is-transparent {
-        background-color: transparent;
-        color: $ac-gray-darker;
-
-        &:hover {
-          background-color: $ac-white-lighter;
-          color: $ac-black;
-        }
-
-        &:focus {
-          background-color: $ac-white-lighter;
-          color: $ac-black;
-        }
-      }
-
-      &.transparent-bg {
-        background-color: transparent;
-        border: 1px solid $ac-label-text;
-
-        img {
-          &:hover {
-            filter: brightness(1) !important;
-          }
-        }
-      }
-
-      &.is-normal {
-        height: 45px;
-        width: 45px;
-      }
-
-      &.is-small {
-        width: 36px;
-        height: 36px;
-        font-size: 15px;
-      }
-      &.is-extra-small {
-        width: 32px;
-        height: 32px;
-        font-size: 14px;
-      }
-      &.is-tinny {
-        width: 25px;
-        height: 25px;
-        font-size: 12px;
-
-        i.fa {
-          font-size: 13px;
-        }
-      }
-    }
-
-    &.is-transparent {
-      padding: 0;
-      height: auto;
-      border: none;
-      font-size: 14px;
-      font-weight: 500;
-      background-color: transparent;
-      color: $ac-color-text;
-
-      &.is-primary {
-        background-color: transparent;
-        color: $ac-primary;
-
-        &:hover {
-          background-color: transparent;
-          color: $ac-primary;
-        }
-      }
-
-      &.is-danger {
-        background-color: transparent;
-        color: $ac-danger;
-
-        &:hover {
-          background-color: transparent;
-          color: $ac-danger;
-        }
-      }
-
-      &.is-small {
-        letter-spacing: 0px;
-        font-size: 13px;
-      }
-
-      &:focus {
-        box-shadow: none;
-        outline: none;
-      }
-    }
-
-    &.is-white {
-      background-color: $ac-white;
-      border: none;
-    }
-
-    &.is-light {
-      background-color: $ac-white-light;
-      border: none;
-
-      &:hover {
-        background-color: darken(#e7e7e7, 9);
-      }
-    }
-
-    &.is-dark {
-      background-color: $ac-gray-dark;
-      border: none;
-      color: $ac-white;
-
-      &:hover {
-        background-color: $ac-color-value;
-      }
-    }
-
-    &.is-black {
-      background-color: $ac-color-text;
-      border: none;
-      color: $ac-white;
-
-      &:hover {
-        background-color: hsla(0, 0, calc(var(--hsl-lightness) - 9%), 1);
-      }
-    }
-
-    &.is-text {
-      background-color: $ac-white;
-      border: none;
-
-      &:hover {
-        box-shadow: none;
-        box-shadow: none;
-        color: hsla(
-          var(--hsl-hue),
-          var(--hsl-saturation),
-          calc(var(--hsl-lightness) - 10%),
-          1
-        );
-      }
-
-      &:focus {
-        box-shadow: none;
-        box-shadow: none;
-        color: hsla(
-          var(--hsl-hue),
-          var(--hsl-saturation),
-          calc(var(--hsl-lightness) - 10%),
-          1
-        );
-      }
-    }
-
-    &.is-static {
-      border: none;
-      background-color: $ac-white-light;
-      color: $ac-white;
-    }
-
-    // ac-button from mixin
-    &.is-primary {
-      @include ac-button($ac-primary);
-    }
-
-    &.is-link {
-      @include ac-button($ac-blue);
-    }
-
-    &.is-info {
-      @include ac-button($ac-info);
-    }
-
-    &.is-success {
-      @include ac-button($ac-success);
-    }
-
-    &.is-warning {
-      @include ac-button($ac-warning);
-    }
-
-    &.is-danger {
-      @include ac-button($ac-danger);
-    }
-
-    &.is-green {
-      @include ac-button($ac-green);
-    }
-  }
-
-  // play button
-  &.ac-play-button {
-    width: 60px;
-    height: 60px;
-    background-color: transparent;
-    transition: 0.3s ease-in-out;
-    border: 2px solid $ac-gray-dark;
-    color: $ac-gray-dark;
-
-    i.fa {
-      padding-left: 5px;
-    }
-
-    // ac-button from mixin
-    &.is-primary {
-      @include ac-play-button($ac-primary);
-    }
-
-    &.is-link {
-      @include ac-play-button($ac-blue);
-    }
-
-    &.is-info {
-      @include ac-play-button($ac-info);
-    }
-
-    &.is-success {
-      @include ac-play-button($ac-success);
-    }
-
-    &.is-warning {
-      @include ac-play-button($ac-warning);
-    }
-
-    &.is-danger {
-      @include ac-play-button($ac-danger);
-    }
-
-    &.is-large {
-      width: auto;
-      display: inline-block;
-      padding: 0 25px 0 4px;
-      height: 53px;
-      border: 1px solid $ac-primary;
-
-      .ac-play {
-        width: 44px;
-        height: 44px;
-        font-size: 16px;
-        line-height: 44px;
-        display: inline-block;
-        border: 1px solid $ac-primary;
-        border-radius: 50%;
-        margin-right: 10px;
-      }
-
-      span {
-        font-size: 16px;
-        font-weight: 600;
-        color: $ac-primary;
-      }
-    }
-  }
-}
-
-.ac-play-button-wrapper {
-  display: flex;
-  align-items: center;
-
-  .ac-play-button {
-    height: 52px;
-    width: 52px;
-    margin-bottom: 0;
-    margin-right: 10px;
-    background-color: $ac-primary;
-
-    i.fa {
-      color: $ac-white;
-    }
-  }
-
-  p {
-    font-size: 16px;
-    font-weight: 600;
-    display: block;
-    color: $ac-color-text;
-
-    span {
-      font-size: 12px;
-      display: block;
-      font-weight: 400;
-    }
-  }
-
-  &:hover {
-    p {
-      color: $ac-primary;
-    }
-  }
-}
-
-// counter button start
-.ac-counter-button {
-  background-color: transparent;
-  border: 1px solid $ac-label-text;
-  border-radius: 4px;
-  height: 46px;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-
-  .ac-counter {
-    min-width: 50px;
-    text-align: left;
-    padding: 0;
-    height: 100%;
-    overflow: hidden;
-
-    input[type="number"] {
-      border: none;
-      height: 100%;
-      padding: 10px;
-      font-size: 15px;
-      font-weight: 500;
-      color: $ac-color-value;
-      background-color: transparent;
-      width: 100%;
-      -moz-appearance: textfield;
-
-      /* Chrome, Safari, Edge, Opera */
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      &:focus {
-        outline: none;
-        background-color: $ac-white;
-      }
-    }
-  }
-
-  // .ac-counter-button .ac-counter {
-  //   padding: 0;
-  //   height: 100%;
-  // }
-
-  .ac-counter-arrow-wrapper {
-    height: 100%;
-    color: $ac-color-text;
-    border-left: 1px solid $ac-label-text;
-
-    .ac-counter-arrow {
-      background-color: transparent;
-      border: none;
-      cursor: pointer;
-      color: $ac-label-text;
-      height: 23px;
-
-      &:hover {
-        color: $ac-color-text;
-      }
-
-      &:first-child {
-        border-bottom: 1px solid $ac-label-text;
-      }
-    }
-  }
-}
-
-// counter button end
-
-// up down button start
-.up-down-buttons {
-  border-radius: 4px;
-  overflow: hidden;
-  margin-right: 10px;
-  position: relative;
-  z-index: 1;
-  max-width: 44px;
-
-  &.is-small {
-    max-width: 36px;
-
-    .up-down-button {
-      width: 36px;
-      height: 18px;
-    }
-  }
-
-  .up-down-button {
-    background-color: $ac-white-light;
-    border: none;
-    display: block;
-    cursor: pointer;
-    width: 44px;
-    height: 22.5px;
-    color: #a4a4a4;
-
-    &.is-info {
-      background-color: $ac-primary;
-      color: $ac-white;
-      transition: 0.3s;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.8;
-    }
-  }
-}
-
-// up down button end
-
-.ac-options:not(.list-button) {
-  button {
-    display: flex;
-    flex-direction: column;
-
-    span {
-      width: 5px;
-      height: 5px;
-      border-radius: 50%;
-      background-color: $ac-color-value;
-      margin-bottom: 3px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-// dark theme start
-.is-dark-theme {
-  .button.ac-button.is-primary.is-light {
-    background-color: $ac-primary;
-    color: $ac-white;
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-  .button.ac-button.is-danger.is-light {
-    background-color: $ac-danger;
-    color: $ac-white;
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-  .button.ac-button {
-    --ac-white: #ffffff;
-    &.is-white {
-      --ac-white: #2e323c;
-    }
-  }
-  .button.ac-button.is-text {
-    background-color: transparent;
-  }
-}
-// dark theme end
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-  .button {
-    &.ac-button {
-      font-size: 14px;
-      letter-spacing: 0px;
-      font-weight: 500;
-      height: 30px;
-      padding-left: 20px;
-      padding-right: 20px;
-
-      &.is-medium {
-        height: 38px;
-        font-size: 15px;
-      }
-
-      &.is-large {
-        height: 42px;
-        font-size: 16px;
-      }
-
-      .ac-icon {
-        padding: 3px;
-        font-size: 10px;
-      }
-    }
-
-    &.ac-play-button {
-      width: 50px;
-      height: 50px;
-    }
-  }
-
-  .ac-counter-button {
-    height: 42px;
-  }
-}
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-  .button {
-    &.ac-button {
-      font-size: 14px;
-      letter-spacing: 0px;
-      font-weight: 500;
-      height: 36px;
-      padding-left: 30px;
-      padding-right: 30px;
-
-      &.is-medium {
-        height: 38px;
-        font-size: 15px;
-      }
-
-      &.is-large {
-        height: 42px;
-        font-size: 16px;
-      }
-
-      .ac-icon {
-        padding: 3px;
-        font-size: 10px;
-      }
-    }
-
-    &.ac-play-button {
-      width: 50px;
-      height: 50px;
-    }
-  }
-
-  .ac-counter-button {
-    height: 42px;
-  }
-}
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-  .button {
-    &.ac-button {
-      font-size: 14px;
-      letter-spacing: 0px;
-      font-weight: 500;
-      height: 36px;
-      padding-left: 30px;
-      padding-right: 30px;
-
-      &.is-small {
-        letter-spacing: 0px;
-        line-height: 1;
-      }
-
-      &.is-medium {
-        height: 38px;
-        font-size: 15px;
-      }
-
-      &.is-large {
-        height: 42px;
-        font-size: 16px;
-      }
-
-      .ac-icon {
-        padding: 3px;
-        font-size: 10px;
-      }
-    }
-
-    &.ac-play-button {
-      width: 50px;
-      height: 50px;
-    }
-  }
-
-  .ac-counter-button {
-    height: 42px;
-  }
-}
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-  .button {
-    &.ac-button {
-      font-size: 15px;
-      letter-spacing: 0px;
-      font-weight: 500;
-      height: 38px;
-      padding-left: 30px;
-      padding-right: 30px;
-
-      &.is-medium {
-        height: 40px;
-        font-size: 15px;
-      }
-
-      &.is-large {
-        height: 44px;
-        font-size: 16px;
-      }
-
-      .ac-icon {
-        padding: 3px;
-        font-size: 10px;
-      }
-    }
-
-    &.ac-play-button {
-      width: 50px;
-      height: 50px;
-    }
-  }
-
-  .ac-counter-button {
-    height: 42px;
-  }
-}
-
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+// .button {
+//   transition: 86ms ease-in-out;
+
+//   // ac-button
+//   &.ac-button {
+//     border-color: $primary;
+//     border-radius: 4px;
+//     font-size: 14px;
+//     font-family: $font-paragraph;
+//     letter-spacing: 0.2px;
+//     color: $primary;
+//     font-weight: 500;
+//     height: 36px;
+//     padding-left: 25px;
+//     padding-right: 25px;
+//     line-height: 1;
+//     &:focus-visible {
+//       outline: none;
+//     }
+
+//     &:hover {
+//       border-color: hsla(
+//         var(--hsl-hue),
+//         var(--hsl-saturation),
+//         calc(var(--hsl-lightness) - 9%),
+//         1
+//       );
+//       color: hsla(
+//         var(--hsl-hue),
+//         var(--hsl-saturation),
+//         calc(var(--hsl-lightness) - 9%),
+//         1
+//       );
+//     }
+
+//     &.underline-button {
+//       text-decoration-line: underline;
+//       border: none;
+//       padding: 0;
+//       height: unset;
+//       letter-spacing: 1px;
+
+//       &.is-primary {
+//         color: $primary;
+//         background-color: transparent;
+
+//         &:hover {
+//           background-color: unset;
+//         }
+//       }
+//     }
+
+//     &.is-disabled {
+//       opacity: 0.5 !important;
+//     }
+
+//     &.is-rounded {
+//       border-radius: 9999px;
+//     }
+
+//     .ac-icon {
+//       margin-left: 25px;
+//       background-color: $white-100;
+//       color: $primary;
+//       padding: 2px 6px;
+//       border-radius: 4px;
+//       width: 20px;
+//       height: 20px;
+//       display: flex;
+//       align-items: center;
+//       justify-content: center;
+//       font-size: 12px;
+//     }
+
+//     &.is-small {
+//       height: 36px;
+//       font-size: 13px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       padding-left: 25px;
+//       padding-right: 25px;
+//     }
+
+//     &.is-extra-small {
+//       height: 32px;
+//       font-size: 12px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       padding-left: 20px;
+//       padding-right: 20px;
+//     }
+
+//     &.is-tiny {
+//       height: 28px;
+//       font-size: 11px;
+//       letter-spacing: 0px;
+//       font-weight: 400;
+//       padding-left: 15px;
+//       padding-right: 15px;
+//       line-height: 1;
+//     }
+//     &.is-extra-tiny {
+//       height: 22px;
+//       font-size: 11px;
+//       letter-spacing: 0px;
+//       font-weight: 400;
+//       padding-left: 10px;
+//       padding-right: 10px;
+//       line-height: 1;
+//     }
+//     &.is-normal {
+//       height: 45px;
+//       font-size: 15px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       padding-left: 25px;
+//       padding-right: 25px;
+//     }
+
+//     &.is-medium {
+//       height: 58px;
+//       font-size: 18px;
+//       padding-left: 45px;
+//       padding-right: 45px;
+//     }
+
+//     &.is-large {
+//       height: 48px;
+//       font-size: 16px;
+//       padding-left: 45px;
+//       padding-right: 45px;
+//     }
+
+//     &.is-square {
+//       width: 52px;
+//       height: 52px;
+//       padding: 0;
+//       &:hover {
+//         svg {
+//           color: $white-100;
+//         }
+//       }
+//       &.is-gray {
+//         background-color: $primary-90;
+//         color: $black-80;
+//         border-color: transparent;
+
+//         img {
+//           width: 16px;
+//         }
+
+//         i.fa {
+//           font-size: 18px;
+//           color: $black-80;
+//         }
+
+//         &:hover {
+//           background-color: $black-80;
+//         }
+//       }
+
+//       &.is-outlined-gray {
+//         border: 1px solid $primary-90;
+//         font-size: 15px;
+//       }
+
+//       &.is-transparent {
+//         background-color: transparent;
+//         color: $black-40;
+
+//         &:hover {
+//           background-color: $primary-90;
+//           color: $black-5;
+//         }
+
+//         &:focus {
+//           background-color: $primary-90;
+//           color: $black-5;
+//         }
+//       }
+
+//       &.transparent-bg {
+//         background-color: transparent;
+//         border: 1px solid $primary-10;
+
+//         img {
+//           &:hover {
+//             filter: brightness(1) !important;
+//           }
+//         }
+//       }
+
+//       &.is-normal {
+//         height: 45px;
+//         width: 45px;
+//       }
+
+//       &.is-small {
+//         width: 36px;
+//         height: 36px;
+//         font-size: 15px;
+//       }
+//       &.is-extra-small {
+//         width: 32px;
+//         height: 32px;
+//         font-size: 14px;
+//       }
+//       &.is-tinny {
+//         width: 25px;
+//         height: 25px;
+//         font-size: 12px;
+
+//         i.fa {
+//           font-size: 13px;
+//         }
+//       }
+//     }
+
+//     &.is-transparent {
+//       padding: 0;
+//       height: auto;
+//       border: none;
+//       font-size: 14px;
+//       font-weight: 500;
+//       background-color: transparent;
+//       color: $primary-10;
+
+//       &.is-primary {
+//         background-color: transparent;
+//         color: $primary;
+
+//         &:hover {
+//           background-color: transparent;
+//           color: $primary;
+//         }
+//       }
+
+//       &.is-danger {
+//         background-color: transparent;
+//         color: $danger;
+
+//         &:hover {
+//           background-color: transparent;
+//           color: $danger;
+//         }
+//       }
+
+//       &.is-small {
+//         letter-spacing: 0px;
+//         font-size: 13px;
+//       }
+
+//       &:focus {
+//         box-shadow: none;
+//         outline: none;
+//       }
+//     }
+
+//     &.is-white {
+//       background-color: $white-100;
+//       border: none;
+//     }
+
+//     &.is-light {
+//       background-color: $primary-90;
+//       border: none;
+
+//       &:hover {
+//         background-color: darken(#e7e7e7, 9);
+//       }
+//     }
+
+//     &.is-dark {
+//       background-color: $black-30;
+//       border: none;
+//       color: $white-100;
+
+//       &:hover {
+//         background-color: $primary-20;
+//       }
+//     }
+
+//     &.is-black {
+//       background-color: $primary-10;
+//       border: none;
+//       color: $white-100;
+
+//       &:hover {
+//         background-color: hsla(0, 0, calc(var(--hsl-lightness) - 9%), 1);
+//       }
+//     }
+
+//     &.is-text {
+//       background-color: $white-100;
+//       border: none;
+
+//       &:hover {
+//         box-shadow: none;
+//         box-shadow: none;
+//         color: hsla(
+//           var(--hsl-hue),
+//           var(--hsl-saturation),
+//           calc(var(--hsl-lightness) - 10%),
+//           1
+//         );
+//       }
+
+//       &:focus {
+//         box-shadow: none;
+//         box-shadow: none;
+//         color: hsla(
+//           var(--hsl-hue),
+//           var(--hsl-saturation),
+//           calc(var(--hsl-lightness) - 10%),
+//           1
+//         );
+//       }
+//     }
+
+//     &.is-static {
+//       border: none;
+//       background-color: $primary-90;
+//       color: $white-100;
+//     }
+
+//     // ac-button from mixin
+//     &.is-primary {
+//       @include ac-button($primary);
+//     }
+
+//     &.is-link {
+//       @include ac-button($info);
+//     }
+
+//     &.is-info {
+//       @include ac-button($info);
+//     }
+
+//     &.is-success {
+//       @include ac-button($success);
+//     }
+
+//     &.is-warning {
+//       @include ac-button($warning);
+//     }
+
+//     &.is-danger {
+//       @include ac-button($danger);
+//     }
+
+//     &.is-green {
+//       @include ac-button($success);
+//     }
+//   }
+
+//   // play button
+//   &.ac-play-button {
+//     width: 60px;
+//     height: 60px;
+//     background-color: transparent;
+//     transition: 0.3s ease-in-out;
+//     border: 2px solid $black-30;
+//     color: $black-30;
+
+//     i.fa {
+//       padding-left: 5px;
+//     }
+
+//     // ac-button from mixin
+//     &.is-primary {
+//       @include ac-play-button($primary);
+//     }
+
+//     &.is-link {
+//       @include ac-play-button($info);
+//     }
+
+//     &.is-info {
+//       @include ac-play-button($info);
+//     }
+
+//     &.is-success {
+//       @include ac-play-button($success);
+//     }
+
+//     &.is-warning {
+//       @include ac-play-button($warning);
+//     }
+
+//     &.is-danger {
+//       @include ac-play-button($danger);
+//     }
+
+//     &.is-large {
+//       width: auto;
+//       display: inline-block;
+//       padding: 0 25px 0 4px;
+//       height: 53px;
+//       border: 1px solid $primary;
+
+//       .ac-play {
+//         width: 44px;
+//         height: 44px;
+//         font-size: 16px;
+//         line-height: 44px;
+//         display: inline-block;
+//         border: 1px solid $primary;
+//         border-radius: 50%;
+//         margin-right: 10px;
+//       }
+
+//       span {
+//         font-size: 16px;
+//         font-weight: 600;
+//         color: $primary;
+//       }
+//     }
+//   }
+// }
+
+// .ac-play-button-wrapper {
+//   display: flex;
+//   align-items: center;
+
+//   .ac-play-button {
+//     height: 52px;
+//     width: 52px;
+//     margin-bottom: 0;
+//     margin-right: 10px;
+//     background-color: $primary;
+
+//     i.fa {
+//       color: $white-100;
+//     }
+//   }
+
+//   p {
+//     font-size: 16px;
+//     font-weight: 600;
+//     display: block;
+//     color: $primary-10;
+
+//     span {
+//       font-size: 12px;
+//       display: block;
+//       font-weight: 400;
+//     }
+//   }
+
+//   &:hover {
+//     p {
+//       color: $primary;
+//     }
+//   }
+// }
+
+// // counter button start
+// .ac-counter-button {
+//   background-color: transparent;
+//   border: 1px solid $primary-10;
+//   border-radius: 4px;
+//   height: 46px;
+//   overflow: hidden;
+//   display: inline-flex;
+//   align-items: center;
+
+//   .ac-counter {
+//     min-width: 50px;
+//     text-align: left;
+//     padding: 0;
+//     height: 100%;
+//     overflow: hidden;
+
+//     input[type="number"] {
+//       border: none;
+//       height: 100%;
+//       padding: 10px;
+//       font-size: 15px;
+//       font-weight: 500;
+//       color: $primary-20;
+//       background-color: transparent;
+//       width: 100%;
+//       -moz-appearance: textfield;
+
+//       /* Chrome, Safari, Edge, Opera */
+//       &::-webkit-outer-spin-button,
+//       &::-webkit-inner-spin-button {
+//         -webkit-appearance: none;
+//         margin: 0;
+//       }
+
+//       &:focus {
+//         outline: none;
+//         background-color: $white-100;
+//       }
+//     }
+//   }
+
+//   // .ac-counter-button .ac-counter {
+//   //   padding: 0;
+//   //   height: 100%;
+//   // }
+
+//   .ac-counter-arrow-wrapper {
+//     height: 100%;
+//     color: $primary-10;
+//     border-left: 1px solid $primary-10;
+
+//     .ac-counter-arrow {
+//       background-color: transparent;
+//       border: none;
+//       cursor: pointer;
+//       color: $primary-10;
+//       height: 23px;
+
+//       &:hover {
+//         color: $primary-10;
+//       }
+
+//       &:first-child {
+//         border-bottom: 1px solid $primary-10;
+//       }
+//     }
+//   }
+// }
+
+// // counter button end
+
+// // up down button start
+// .up-down-buttons {
+//   border-radius: 4px;
+//   overflow: hidden;
+//   margin-right: 10px;
+//   position: relative;
+//   z-index: 1;
+//   max-width: 44px;
+
+//   &.is-small {
+//     max-width: 36px;
+
+//     .up-down-button {
+//       width: 36px;
+//       height: 18px;
+//     }
+//   }
+
+//   .up-down-button {
+//     background-color: $primary-90;
+//     border: none;
+//     display: block;
+//     cursor: pointer;
+//     width: 44px;
+//     height: 22.5px;
+//     color: #a4a4a4;
+
+//     &.is-info {
+//       background-color: $primary;
+//       color: $white-100;
+//       transition: 0.3s;
+//     }
+
+//     &:disabled {
+//       cursor: not-allowed;
+//       opacity: 0.8;
+//     }
+//   }
+// }
+
+// // up down button end
+
+// .ac-options:not(.list-button) {
+//   button {
+//     display: flex;
+//     flex-direction: column;
+
+//     span {
+//       width: 5px;
+//       height: 5px;
+//       border-radius: 50%;
+//       background-color: $primary-20;
+//       margin-bottom: 3px;
+
+//       &:last-child {
+//         margin-bottom: 0;
+//       }
+//     }
+//   }
+// }
+
+// // dark theme start
+// .is-dark-theme {
+//   .button.ac-button.is-primary.is-light {
+//     background-color: $primary;
+//     color: $white-100;
+//     &:hover {
+//       opacity: 0.8;
+//     }
+//   }
+//   .button.ac-button.is-danger.is-light {
+//     background-color: $danger;
+//     color: $white-100;
+//     &:hover {
+//       opacity: 0.8;
+//     }
+//   }
+//   .button.ac-button {
+//     --ac-white: #ffffff;
+//     &.is-white {
+//       --ac-white: #2e323c;
+//     }
+//   }
+//   .button.ac-button.is-text {
+//     background-color: transparent;
+//   }
+// }
+// // dark theme end
+// /****************************************
+// Responsive Classes
+// *****************************************/
+// // Extra small devices (portrait phones, less than 576px)
+// @media (max-width: 575.98px) {
+//   .button {
+//     &.ac-button {
+//       font-size: 14px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       height: 30px;
+//       padding-left: 20px;
+//       padding-right: 20px;
+
+//       &.is-medium {
+//         height: 38px;
+//         font-size: 15px;
+//       }
+
+//       &.is-large {
+//         height: 42px;
+//         font-size: 16px;
+//       }
+
+//       .ac-icon {
+//         padding: 3px;
+//         font-size: 10px;
+//       }
+//     }
+
+//     &.ac-play-button {
+//       width: 50px;
+//       height: 50px;
+//     }
+//   }
+
+//   .ac-counter-button {
+//     height: 42px;
+//   }
+// }
+
+// // Small devices (landscape phones, 576px and up)
+// @media (min-width: 576px) and (max-width: 767.98px) {
+//   .button {
+//     &.ac-button {
+//       font-size: 14px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       height: 36px;
+//       padding-left: 30px;
+//       padding-right: 30px;
+
+//       &.is-medium {
+//         height: 38px;
+//         font-size: 15px;
+//       }
+
+//       &.is-large {
+//         height: 42px;
+//         font-size: 16px;
+//       }
+
+//       .ac-icon {
+//         padding: 3px;
+//         font-size: 10px;
+//       }
+//     }
+
+//     &.ac-play-button {
+//       width: 50px;
+//       height: 50px;
+//     }
+//   }
+
+//   .ac-counter-button {
+//     height: 42px;
+//   }
+// }
+
+// // Medium devices (tablets, 768px and up)
+// @media (min-width: 768px) and (max-width: 991.98px) {
+//   .button {
+//     &.ac-button {
+//       font-size: 14px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       height: 36px;
+//       padding-left: 30px;
+//       padding-right: 30px;
+
+//       &.is-small {
+//         letter-spacing: 0px;
+//         line-height: 1;
+//       }
+
+//       &.is-medium {
+//         height: 38px;
+//         font-size: 15px;
+//       }
+
+//       &.is-large {
+//         height: 42px;
+//         font-size: 16px;
+//       }
+
+//       .ac-icon {
+//         padding: 3px;
+//         font-size: 10px;
+//       }
+//     }
+
+//     &.ac-play-button {
+//       width: 50px;
+//       height: 50px;
+//     }
+//   }
+
+//   .ac-counter-button {
+//     height: 42px;
+//   }
+// }
+
+// // Large devices (desktops, 992px and up)
+// @media (min-width: 992px) and (max-width: 1199.98px) {
+//   .button {
+//     &.ac-button {
+//       font-size: 15px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       height: 38px;
+//       padding-left: 30px;
+//       padding-right: 30px;
+
+//       &.is-medium {
+//         height: 40px;
+//         font-size: 15px;
+//       }
+
+//       &.is-large {
+//         height: 44px;
+//         font-size: 16px;
+//       }
+
+//       .ac-icon {
+//         padding: 3px;
+//         font-size: 10px;
+//       }
+//     }
+
+//     &.ac-play-button {
+//       width: 50px;
+//       height: 50px;
+//     }
+//   }
+
+//   .ac-counter-button {
+//     height: 42px;
+//   }
+// }
+
+// // Extra large devices (large desktops, 1200px and up)
+// @media (min-width: 1200px) {
+// }