.ds-dropdown-container {
  display: inline-block;
  position: relative;

  .ds-dropdown-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-150);
    box-sizing: border-box;
    cursor: pointer;
    border-radius: var(--radius-050);
    color: var(--text-on-color-light);
    width: 100%;

    .ds-icon {
      color: var(--text-on-color-light);
    }

    .left-side {
      display: flex;
      align-items: center;
      gap: var(--spacing-150);
      flex: 1 1 auto;
      min-width: 0;
    }

    > .divider {
      align-self: stretch;
      border-left: 1px solid var(--neutral-dark-0);
      width: 1px;
      padding: 0 !important;
      margin: 0;
      flex-shrink: 0;
    }

    &:disabled.primary,
    &:disabled.secondary {
      background: var(--layer-disabled) !important;
      border: 1px solid var(--layer-disabled) !important;
      color: var(--text-on-disabled) !important;

      .ds-icon {
        color: var(--text-on-disabled) !important;
      }
    }

    &:disabled.tertiary {
      background: var(--button-contrast) !important;
      border: 1px solid var(--border-subtle-2) !important;
      color: var(--text-disabled) !important;

      .ds-icon {
        color: var(--text-disabled) !important;
      }

      > .divider {
        border: 1px solid var(--border-subtle-2) !important;
      }
    }

    &.primary {
      background: var(--button-primary-default);
      border: 1px solid var(--button-primary-default);

      &.active {
        background: var(--button-primary-active);
        border: 1px solid var(--button-primary-active);
      }

      &:hover {
        background: var(--button-primary-hover);
        border: 1px solid var(--button-primary-hover);
      }
    }

    &.secondary {
      background: var(--button-secondary-default);
      border: 1px solid var(--button-secondary-default);
      color: var(--text-on-color-dark);

      .ds-icon {
        color: var(--text-on-color-dark);
      }

      &.active {
        background: var(--button-secondary-default);
        border: 1px solid var(--button-secondary-default);
      }

      &:hover {
        background: var(--button-secondary-hover);
        border: 1px solid var(--button-secondary-hover);
      }
    }

    &.tertiary {
      background: var(--button-contrast);
      border: 1px solid var(--border-accent-3);
      color: var(--text-primary);

      .ds-icon {
        color: var(--text-primary);
      }

      > .divider {
        border-left: 1px solid var(--border-accent-3);
      }

      &:hover {
        border: 1px solid var(--border-hover);
        background: var(--button-secondary-default);

        > .divider {
          border-left: 1px solid var(--border-hover);
        }
      }
    }

    &.large {
      @include button-large;
      height: 48px;
      padding: 0 var(--spacing-150) 0 var(--spacing-250);
    }

    &.medium {
      @include button-medium;
      height: 40px;
      padding: 0 var(--spacing-100) 0 var(--spacing-200);
      gap: 8px;

      .left-side {
        padding-right: 4px;
        gap: 4px;
      }
    }

    &.small {
      @include button-small;
      height: 32px;
      padding: 0 var(--spacing-050) 0 var(--spacing-150);
      gap: 4px;

      .left-side {
        gap: 4px;
        padding-right: 8px;
      }
    }

    &.x-small {
      @include button-small;
      height: 24px;
      padding: 0 var(--spacing-050) 0 var(--spacing-100);
      gap: 0px;

      .left-side {
        gap: 4px;
        padding-right: 12px;
      }
    }

    .icon-custom {
      flex-shrink: 0;
    }

    .icon-arrow {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      padding: 0;
    }
  }
}
