@use "uswds-core" as *;
@use "cisa_colors" as *;

// Used on: TODO links
// Used on: NONE
a[href$="todo"]::after {
  background-color: yellow;
  color: color(blue-80v);
  content: " [link TBD]";
  font-style: italic;
}

// Used on: profile
// Note: Is this needed?
a.usa-link.usa-link--always-blue {
  color: #{$dhs-blue};
}

// Used on: breadcrumbs
// Note: This could potentially be simplified and use usa-button--with-icon
a.breadcrumb__back {
  display:flex;
  align-items: center;
  margin-bottom: units(2.5);
  color: #{$dhs-blue};
  &:visited {
    color: color('primary');
  }
  
  @include at-media('tablet') {
    //align to top of sidebar
    margin-top: units(-0.5);
  }
}

// Remove anchor buttons' underline
a.usa-button {
  text-decoration: none;
}

// Unstyled anchor buttons
a.usa-button--unstyled:visited {
  color: color('primary');
}

// Disabled anchor buttons
// NOTE: Not used
a.usa-button.disabled-link {
  background-color: #ccc !important;
  color: #454545 !important
}

a.usa-button.disabled-link:hover {
  background-color: #ccc !important;
  cursor: not-allowed !important;
  color: #454545 !important
}

a.usa-button.disabled-link:focus {
  background-color: #ccc !important;
  cursor: not-allowed !important;
  outline: none !important;
  color: #454545 !important
}

a.usa-button--unstyled.disabled-link,
a.usa-button--unstyled.disabled-link:hover,
a.usa-button--unstyled.disabled-link:focus {
  cursor: not-allowed !important;
  outline: none !important;
  text-decoration: none !important;
}

// Disabled buttons
// Used on: Domain managers, disabled logo on profile 
.usa-button--unstyled.disabled-button,
.usa-button--unstyled.disabled-button:hover,
.usa-button--unstyled.disabled-button:focus {
  cursor: not-allowed !important;
  outline: none !important;
  text-decoration: none !important;
}

// Unstyled variant for reverse out?
// Used on: NONE
.usa-button--unstyled--white,
.usa-button--unstyled--white:hover,
.usa-button--unstyled--white:focus,
.usa-button--unstyled--white:active {
  color: color('white');
}

// Solid anchor buttons
a.usa-button:not(.usa-button--unstyled, .usa-button--outline) {
  color: color('white');
}

a.usa-button:not(.usa-button--unstyled, .usa-button--outline):visited,
a.usa-button:not(.usa-button--unstyled, .usa-button--outline):hover,
a.usa-button:not(.usa-button--unstyled, .usa-button--outline):focus,
a.usa-button:not(.usa-button--unstyled, .usa-button--outline):active {
  color: color('white');
}

// Outline anchor buttons
a.usa-button--outline,
a.usa-button--outline:visited {
  box-shadow: inset 0 0 0 2px color('primary');
  color: color('primary');
}
  
a.usa-button--outline:hover,
a.usa-button--outline:focus {
  box-shadow: inset 0 0 0 2px color('primary-dark');
  color: color('primary-dark');
}
  
a.usa-button--outline:active {
  box-shadow: inset 0 0 0 2px color('primary-darker');
  color: color('primary-darker');
}

// Used on: Domain request withdraw confirmation
a.withdraw {
  background-color: color('error');
}

a.withdraw:hover,
a.withdraw:focus {
  background-color: color('error-dark');
}
  
a.withdraw:active {
  background-color: color('error-darker');
}

// Used on: Domain request status
//NOTE: Revise to BEM convention usa-button--outline-secondary
a.withdraw_outline,
a.withdraw_outline:visited {
  box-shadow: inset 0 0 0 2px color('error');
  color: color('error');
}
  
a.withdraw_outline:hover,
a.withdraw_outline:focus {
  box-shadow: inset 0 0 0 2px color('error-dark');
  color: color('error-dark');
}
  
a.withdraw_outline:active {
  box-shadow: inset 0 0 0 2px color('error-darker');
  color: color('error-darker');
}


// Used on: Domain request submit
.dotgov-button--green {
  background-color: color('success-dark');

  &:hover {
    background-color: color('success-darker');
  }

  &:active {
    background-color: color('green-80v');
  }
}

// Cancel button
// Used on: DNSSEC main page
// We want to center this button on mobile
// and add some extra left margin on tablet+
.usa-button--cancel {
  text-align: center;
  @include at-media('tablet') {
    margin-left: units(2);
  }
}

.toggleable_input {
  svg.usa-icon {
    width: 1.5em !important;
    height: 1.5em !important;
    color: #{$dhs-green};
    position: absolute;
  }
  &.toggleable_input__error {
    svg.usa-icon {
      color: #{$dhs-red};
    }
    div.readonly-field {
      color: #{$dhs-red};
    }
  }
}

// Used on: Profile page, toggleable fields
// Note: Could potentially be cleaned up by using usa-button--with-icon
// We need to deviate from some default USWDS styles here
// in this particular case, so we have to override this.
.usa-form .usa-button.readonly-edit-button {
  margin-top: 0px !important;
  padding-top: 0px !important;
  svg {
    width: 1.25em !important;
    height: 1.25em !important;
  }
}

//Used on: Domains and Requests tables
.usa-button--filter {
  width: auto;
  // For mobile stacking
  margin-bottom: units(1);
  border: solid 1px color('base-light') !important;
  padding: units(1);
  color: color('primary-darker') !important;
  font-weight: font-weight('normal');
  font-size: size('ui', 'xs');
  box-shadow: none;
  &:hover {
    box-shadow: none;
  }
}

// Buttons with nested icons
// Note: Can be simplified by adding usa-link--icon to anchors in tables
.dotgov-table a,
.usa-link--icon,
.usa-button--with-icon {
    display: flex;
    align-items: flex-start;
    color: color('primary');
    column-gap: units(.5);
    align-items: center;
}

// Red, for delete buttons
// Used on: All delete buttons
// Note: Can be simplified by adding text-secondary to delete anchors in tables
button.text-secondary,
button.text-secondary:hover,
a.text-secondary,
a.text-secondary:hover {
  color: $theme-color-error;
}

.usa-button.usa-button--secondary {
  background-color: $theme-color-error;
}

.usa-button--show-more-button {
  font-size: size('ui', 'xs');
  text-decoration: none;
  .usa-icon {
    top: 6px;
  }
}
