@import '../../themes/variables.scss';
.dry-button-dropdown {
  padding: unset !important;
}
.dry-button {
  display: flex;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  cursor: pointer;

  /* Text sm/Semibold */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  width: max-content;
  transition: background-color 0.2s linear;

  &:hover {
    transform: scale(1.02);
  }

  &__button-content {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    font-style: normal;
    display: flex;
    align-items: center;
  }

  //   .button.underline .button-content {
  //   color: $link-purple;
  // }

  // .button.underline  &__button-content:hover {
  //   text-decoration: underline;
  // }

  &__content-wrapper {
  }
  &__text {
  }

  &__children {
  }
  &--dropdown {
    display: flex;
    padding: 10px 12px 10px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 4px;
    border: 2px solid var(--Light-mode-Primary600, #4945ff);
    background: var(--Light-mode-Neutral0, #fff);
    color: var(--Light-mode-Neutral800, #32324d);
    font-feature-settings: 'clig' off, 'liga' off;

    /* Omega (Regular) - Body */
    font-family: 'SF Pro Text';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  &--primary {
    color: var(--base-white, #fff);
    border-radius: 8px;
    border: 1px solid var(--primary-600, #7f56d9);
    background: var(--primary-600, #7f56d9);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    &:hover {
      background: var(--primary-700, #6941c6);
    }
    &-destructive {
      border: 1px solid var(--error-600, #d92d20);
      background: var(--error-600, #d92d20);
      &:hover {
        border: 1px solid var(--error-700, #b42318);
        background: var(--error-700, #b42318);
      }
    }
  }

  &--secondary-grey {
    border: 1px solid var(--gray-300, #d0d5dd);
    background: var(--base-white, #fff);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

    color: var(--gray-700, #344054);
    &:hover {
      background: var(--gray-50, #f9fafb);
    }
    &-destructive {
      border: 1px solid var(--error-300, #fda29b);
      background: var(--base-white, #fff);
      color: var(--error-700, #b42318);
      &:hover {
        color: var(--error-800, #912018);
        border: 1px solid var(--error-300, #fda29b);
        background: var(--error-50, #fef3f2);
      }
    }
  }
  &--secondary {
    border: 1px solid var(--primary-50, #f9f5ff);
    background: var(--primary-50, #f9f5ff);
    color: var(--primary-700, #6941c6);
    &:hover {
      background: var(--primary-100, #f4ebff);
    }
    &-destructive {
      color: var(--error-700, #b42318);
      border: 1px solid var(--error-50, #fef3f2);
      background: var(--error-50, #fef3f2);
      &:hover {
        color: var(--error-800, #912018);
        border: 1px solid var(--error-100, #fee4e2);
        background: var(--error-100, #fee4e2);
      }
    }
  }

  &--tertiary-grey {
    border: none;
    background: none;
    color: var(--gray-600, #475467);
    &:hover {
      background: var(--gray-50, #f9fafb);
    }
    &-destructive {
      color: var(--error-700, #b42318);
      &:hover {
        background: var(--error-50, #fef3f2);
        color: var(--error-800, #912018);
      }
    }
  }

  &--tertiary {
    border: none;
    background: none;
    color: var(--primary-700, #6941c6);
    &:hover {
      background: var(--primary-50, #f9f5ff);
    }
    &-destructive {
      color: var(--error-700, #b42318);
      &:hover {
        background: var(--error-50, #fef3f2);
        color: var(--error-800, #912018);
      }
    }
  }

  &--link-grey {
    border: none;
    background: transparent;
    color: var(--gray-600, #475467);
    &:hover {
      color: var(--gray-600, #475467);
    }
    &-destructive {
      color: var(--error-700, #b42318);
      &:hover {
        color: var(--error-800, #912018);
      }
    }
  }

  &--link {
    border: none;
    background: transparent;
    color: var(--primary-700, #6941c6);
    &:hover {
      color: var(--primary-800, #53389e);
    }
    &-destructive {
      color: var(--error-700, #b42318);
      &:hover {
        color: var(--error-800, #912018);
      }
    }
  }

  &--small {
    padding: 8px 14px;
    font-size: 14px;
  }

  &--medium {
    padding: 10px 16px;
    font-size: 14px;
  }

  &--large {
    padding: 10px 18px;
    font-size: 16px;
  }

  &--xl {
    padding: 12px 20px;
    font-size: 16px;
  }

  &--xxl {
    padding: 16px 28px;
    font-size: 18px;
  }

  &--full-width {
    width: 100%;
  }

  &--submit {
    background-color: #007bff;
    color: white;

    &:hover {
      /* Shadow/xs */
      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
      background-color: #0069d9;
    }
  }

  &--blink {
    animation: blink 1s steps(5, start) infinite;
  }

  @keyframes blink {
    to {
      visibility: hidden;
    }
  }

  &--pulse {
    animation: pulse 1s infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  &--animated {
    transition: transform 0.3s ease-in-out;

    &:hover {
      /* Shadow/xs */
      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
      transform: scale(1.05);
    }
  }

  &--disabled,
  &--loading,
  &:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    background-color: #6c757d;
    color: white;
  }

  &--error {
    border: 1px solid var(--error-600, #d92d20);
    background: var(--error-600, #d92d20);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  }
  &--outline-transparent {
    background: transparent;
    color: #000;
    border-radius: 8px;
    border: 1px solid var(--gray-300, #d0d5dd);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    &:hover {
      background: var(--primary-600, #007bff);
      color: #000;
    }
  }
  &--ghost-info {
    // TODO-p3: make all of these ghost buttons the same for theses
    // ----
    border: none;
    background: transparent;

    display: flex;
    padding: 2px 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;

    // ----

    color: var(--primary-700, #c45c0d);
  }
  &--ghost-text {
    // TODO-p3: make all of these ghost buttons the same for theses
    // ----
    border: none;
    background: transparent;

    display: flex;
    padding: 2px 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;

    // ----

    color: var(--gray-600, #475467);
  }

  &--ghost-danger {
    // ----
    border: none;
    background: transparent;

    display: flex;
    padding: 2px 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    // ----
    color: var(--error-700, #b42318);
  }
  &--danger {
    border: 1px solid var(--error-600, #d92d20);
    background: var(--error-600, #d92d20);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: #fff;
  }

  &--icon {
    all: unset;
    width: auto;
    height: auto;
    cursor: pointer;

    &:hover svg {
      stroke: $link-purple;
      transition: fill $button-transition;
    }
  }

  &--icon-left {
    flex-direction: row;
  }
  &--icon-right {
    flex-direction: row-reverse;
  }

  &:active {
    transform: scale(0.98); /* Makes the button look pressed down */
  }

  &--primary,
  &--secondary,
  &--tertiary,
  &--link,
  &--small,
  &--medium,
  &--large,
  &--xl,
  &--xxl,
  &--full-width,
  &--submit,
  &--blink,
  &--pulse,
  &--animated,
  &--disabled,
  &--loading,
  &--error,
  &--outline-transparent,
  &--ghost-info,
  &--ghost-text,
  &--ghost-danger,
  &--danger,
  &--icon,
  &--icon-left,
  &--icon-right {
    &:active {
      /*  customize the :active styles for different button types as needed */
    }
  }
}

.dry-button--close {
  background-color: transparent;
  color: #333;
  font-size: 24px;
  padding: 5px 10px;
  border: none;
  transition: background-color 0s;

  &:hover {
    border: 1px solid var(--error-600, #d92d20);
    background: var(--error-600, #d92d20);
    color: #fff;

    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  }
}

// New styles for dynamic note
.dry-button-container {
  position: relative;
}

.dry-button__note {
  display: none;
  position: absolute;
  bottom: -100%;
  right: 0;
  height: 50px;
  width: 200px;
  transform: translateX(100%);
  background-color: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
  z-index: 1000;
}

.dry-button-container:hover .dry-button__note {
  display: block;
}

.dry-button-social {
  display: flex;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  cursor: pointer;
  color: #344054;

  /* Text md/Semibold */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  &--google {
    border: 1px solid #d0d5dd;
    background: #fff;

    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

    &:hover {
      background: #f9fafb;
    }
  }
  &--facebook {
    color: var(--base-white, #fff);
    border: none;
    background: #1877f2;

    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    &:hover {
      background: #0c63d4;
    }
  }
  &--apple {
    color: var(--base-white, #fff);
    border: none;
    background: var(--base-black, #000);
  }
  &--twitter {
    border: none;
    color: var(--base-white, #fff);
    background: #1da1f2;
    &:hover {
      background: #0c8bd9;
    }
  }
  &--figma {
    color: var(--base-white, #fff);
    border: none;
    background: var(--base-black, #000);
  }
  &--dribbble {
    color: var(--base-white, #fff);
    background: #ea4c89;
    border: none;
    &:hover {
      background: #e62872;
    }
  }
}
.dry-button-socialVariant {
  &--colorWithBrand {
    color: #344054;
    border-radius: 8px;
    border: 1px solid #d0d5dd;
    background: #fff;

    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    &:hover {
      background: #f9fafb;
    }
  }
  &--color {
    color: #344054;
    border-radius: 8px;
    border: 1px solid #d0d5dd;
    background: #fff;

    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    &:hover {
      background: #f9fafb;
    }
  }
}

// ========================================
// Media Queries
// ========================================
// Adjusting desktop screens
@media (min-width: 1024px) {
}
// Adjusting  for tablet screens (between small tablets and desktops)
@media (max-width: 1023px) {
  .dry-button {
  }
}
// Adjusting for smaller screens (small tablets and mobile)
@media (max-width: 768px) {
  .dry-button {
    &__button-content {
      font-size: 12px;
    }
    &__text {
      font-size: 12px;
    }
  }
}
// Adjusting  for smaller screens (mobile)
@media (max-width: 480px) {
  .dry-button {
    &__button-content {
      font-size: 12px;
    }
    &__text {
      font-size: 12px;
    }
  }
}