@import url("../index.scss");

.icon-label-container {
  @apply flex max-w-full items-center;
  gap: theme(digitv2.spacers.spacer2);

  &.small{
    gap: theme(digitv2.spacers.spacer1);
  }

  .digit-button-customIcon {
    @apply flex-shrink-0 w-6 h-6;

    &.medium {
      @apply w-5 h-5;
    }

    &.small {
      width: 0.875rem;
      height: 0.875rem;
    }
  }

  &.link {
    @apply items-start;
    gap: theme(digitv2.spacers.spacer1);

    .digit-button-customIcon {
      @apply w-5 h-5 flex-shrink-0;

      &.small {
        width: 0.875rem;
        height: 0.875rem;
        margin-top:theme(digitv2.spacers.spacer1);
      }
    }
  }
}

.digit-button-label {
  @extend .typography.button.large;
  @apply text-center text-white w-full overflow-hidden whitespace-no-wrap;
  text-overflow: ellipsis;
}

.digit-button-default {
  @apply text-center cursor-pointer outline-none inline-flex bg-white max-w-full items-center;
  height: fit-content;
  width: fit-content;
  gap: theme(digitv2.spacers.spacer2);
  border: 0.063rem solid #000000;
  padding-left: theme(digitv2.spacers.spacer6);
  padding-right: theme(digitv2.spacers.spacer6);
  min-width: 6.5625rem;
  min-height: theme(digitv2.spacers.spacer10);

  h2 {
    @extend .typography.button.large;
    @apply text-black h-5;
    margin: 0;
  }
}

.digit-button-primary {
  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
  width: fit-content;
  padding-left:  theme(digitv2.spacers.spacer6);
  padding-right:  theme(digitv2.spacers.spacer6);
  gap:  theme(digitv2.spacers.spacer2);
  min-width: 6.5625rem;
  background-color: theme(digitv2.lightTheme.primary-1);

  h2 {
    @extend .typography.button.large;
    @apply text-white;
    margin: 0;
  }

  &.disabled {
    @apply opacity-50;
    background: theme(digitv2.lightTheme.text-disabled);
  }

  &:focus {
    @apply outline-none;
  }

  &:hover {
    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
  }

  &:active {
    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;

    h2 {
      font-weight: theme(digitv2.fontWeight.bold);
    }
  }

  &.large{
    h2{
      @apply h-5;
      margin-top: 0.125rem;
    }
  }

  &.medium {
    @apply h-8;

    h2 {
      @extend .typography.button.medium;
    }
  }

  &.small {
    @apply h-6;

    h2 {
      @extend .typography.button.small;
    }
  }

}

.digit-button-secondary {
  @apply text-center cursor-pointer outline-none bg-white flex max-w-full items-center justify-center h-10;
  padding-left:  theme(digitv2.spacers.spacer6);
  padding-right:  theme(digitv2.spacers.spacer6);
  gap:  theme(digitv2.spacers.spacer2);
  min-width: 6.5625rem;
  border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
  width: fit-content;

  &:focus {
    @apply outline-none;
  }

  &:hover {
    @apply bg-white;
    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset;
  }

  &:active {
    @apply bg-white;
    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;

    h2 {
      font-weight: theme(digitv2.fontWeight.bold);
    }
  }

  h2 {
    @extend .typography.button.large;
    margin: 0;
    color: theme(digitv2.lightTheme.primary-1);
  }

  .digit-button-label{
    color: theme(digitv2.lightTheme.primary-1);
  }

  &.disabled {
    @apply opacity-50;
    border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);

    h2 {
      color: theme(digitv2.lightTheme.text-disabled);
    }
  }

  &.large{
    h2{
      @apply h-5;
    }
  }

  &.medium {
    @apply h-8;

    h2 {
      @extend .typography.button.medium;
    }
  }

  &.small {
    @apply h-6;

    h2 {
      @extend .typography.button.small;
    }
  }
}

.digit-button-teritiary {
  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
  background: none;
  width: fit-content;
  padding-left:  theme(digitv2.spacers.spacer0);
  padding-right: theme(digitv2.spacers.spacer0);
  gap:  theme(digitv2.spacers.spacer2);
  min-width: 6.5625rem;

  &:focus {
    @apply outline-none;
  }

  h2 {
    @apply w-auto;
    @extend .typography.button.large;
    margin: 0;
    color: theme(digitv2.lightTheme.primary-1);
  }

  &.disabled {
    @apply opacity-50;

    h2 {
      color: theme(digitv2.lightTheme.text-disabled);
    }
  }

  &.large{
    h2{
      @apply h-5;
      margin-top: 0.125rem;
    }
  }

  &.medium {
    @apply h-8;

    h2 {
      @extend .typography.button.medium;
    }
  }

  &.small {
    @apply h-6;

    h2 {
      @extend .typography.button.small;
    }
  }

  &:active{
    h2{
      font-weight: theme(digitv2.fontWeight.bold);
    }
  }
}

.digit-button-link {
  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center;
  background: none;
  width: fit-content;
  height: fit-content;
  padding-left:  theme(digitv2.spacers.spacer0);
  padding-right: theme(digitv2.spacers.spacer0);
  gap: theme(digitv2.spacers.spacer2);
  min-width: 4.875rem;

  &:focus {
    @apply outline-none;
  }

  h2 {
    @extend .typography.link-L;
    @apply h-auto whitespace-normal text-left w-auto;
    margin: 0;
    word-break: break-word;
    color: theme(digitv2.lightTheme.primary-1);
    height: fit-content;
  }

  &:hover {
    h2 {
      @extend .typography.link-L;
      @apply h-auto whitespace-normal text-left;
      margin: 0;
      word-break: break-word;
      color: theme(digitv2.lightTheme.primary-1);
      height: fit-content;
      text-decoration-thickness: 0.125rem;
    }
  }

  &.disabled {
    @apply opacity-50;

    h2 {
      color: theme(digitv2.lightTheme.text-disabled);
    }
  }

  &.medium {

    h2 {
      @extend .typography.link-S;
    }
  }

  &.small {

    h2 {
      @extend .typography.link-XS;
    }
  }
}

.digit-button-digit-action-cancel {
  @apply bg-border text-center outline-none px-lg text-center;
  border-color: #464646;
  border-bottom: 0.063rem;
  border-style: solid;
  min-width: 5.2rem;

  &.disabled {
    @apply opacity-50;
  }

  &:focus {
    @apply outline-none;
  }

  h2 {
    @apply font-medium text-black flex justify-center items-center;
    margin: 0;
    font-family: theme(digitv2.fontFamily.sans)
  }
}

.digit-submit-bar {
  @apply w-full text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
  padding-left:  theme(digitv2.spacers.spacer6);
  padding-right:  theme(digitv2.spacers.spacer6);
  gap:  theme(digitv2.spacers.spacer2);
  min-width: 15rem;
  background-color: theme(digitv2.lightTheme.primary-1);

  h2 {
    @extend .typography.button.large;
    @apply text-white;
    margin: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    @apply h-5;
    margin-top: 0.125rem;
  }

  &.disabled {
    @apply opacity-50;
    background: theme(digitv2.lightTheme.text-disabled);
  }

  &:focus {
    @apply outline-none;
  }

  &:hover {
    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
  }

  &:active {
    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;

    h2 {
      font-weight: theme(digitv2.fontWeight.bold);
    }
  }
}

.digit-selector-button-primary {
  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg;
  background-color: theme(digitv2.lightTheme.primary-1);

  &:focus {
    @apply outline-none;
  }

  h2 {
    @apply font-rc font-medium text-legend text-white;
  }
}

.digit-selector-button-border {
  @apply h-8 bg-border text-center border-b-2 border-input-border border-solid outline-none px-lg;

  &:focus {
    @apply outline-none;
  }

  h2 {
    @apply font-rc font-medium text-legend text-text-primary;
  }
}

.digit-selector-button-primary-disabled {
  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
  background-color: theme(digitv2.lightTheme.primary-1);

  &:focus {
    @apply outline-none;
  }

  h2 {
    @apply font-rc font-medium text-legend text-white;
  }
}

.digit-submit-bar:focus {
  @apply outline-none !important;
}

.digit-buttons-group {
  display: flex;
  flex-direction: row;
  height: fit-content;
  gap:theme(digitv2.spacers.spacer4);

  @media (max-width: 30rem) {
    flex-direction: column;

    button{
      width: 100%;
    }
  }

  button{
    flex: 1;
  }
}

.header-dropdown-container {
  position: relative; 

  .header-dropdown-menu {
    @apply absolute z-30;
    bottom: theme(digitv2.spacers.spacer5);
    right: 0;
    max-height: unset;
    margin-top: unset;
  
    &.showBottom{
      bottom: unset;
    }

    @media (max-width: 30rem) {
      width: 100% !important;
    }

    @media (max-width: 15.625rem) {
      left:0 ;
    }
  }
}