.sds-menu {
  @include u-padding-top(1);
  @include u-padding-bottom('105');
}

.sds-menu__header {
  @include u-display('flex');
  @include u-flex('align-center');
  justify-content: space-between;
  padding: 0 10px 5px 20px;
  margin-bottom: 3px;
  border-bottom: 1px solid #eae6e6;

  button {
    border: 2px solid color('base-light');

    &:hover {
      border-color: color('primary');
    }

    &:active {
      border-color: color('secondary-dark');
      ;
    }
  }
}

.sds-menu__header-title {
  font-size: 18px;
  font-weight: font-weight('semibold');
  color: color('gray-warm-70');
}

.sds-menu__item {
  @include button-unstyled;
  display: flex;
  align-items: center;
  padding: 6px 20px;
  width: 100%;
  text-decoration: none;
  font-weight: font-weight('semibold');
  font-size: 17px;

  &:hover {
    color: #7a591a
  }

  &:focus {
    color: color('accent-warm-darker');
    text-decoration: underline;
    outline-offset: -4px !important;
  }
}

// Small menu
.sds-menu.sds-menu--small {
  .sds-menu__header-title {
    @include u-font('sans', 'xs');
  }

  .sds-menu__item {
    @include u-font('sans', '2xs');
  }
}

// sds action menu
.sds-button--action {
  border-radius: 50%;
  height: units(4);
  width: units(4);
  @include u-display("inline-flex");
  @include u-flex("align-center");
  @include u-flex("justify-center");
  margin: unset;
  padding: 0;

  .svg-inline--fa {
    align-self: center;
    height: 1.5em;
    width: 1.5rem;
  }

  &.sds-button--small {
    height: units(3);
    width: units(3);
    padding: 0;
    font-size: size("body", 1);
  }

  &.sds-button--big,
  &.usa-button--big {
    height: units(5);
    width: units(5);
    font-size: size("body", 6);
  }

  background-color: color("white");
  @include u-border("white");
  transition: box-shadow 0.2s ease-out;

  &.usa-button--hover,
  &:hover {
    background-color: color("white");
    @include u-border("white");
    @include u-shadow(2);
  }

  &:active {
    @include u-border("secondary-dark");
    box-shadow: $button-shadow;
    color: #1A4480;
  }

  &.usa-button--hover,
  &:hover {
    box-shadow: $button-shadow;
  }

  span {
    display: none;
  }

  @include at-media('tablet-lg') {
    span {
      display: inline;
      color: #1A4480;
    }

    height: 40px;
    width: 125px;
    @include u-radius('lg');

    svg {
      @include u-text('white');
      @include u-bg('secondary-dark');
      border-radius: 50%;
      padding: .25rem;
      margin-left: 8px;
      height: 1.25em;
    }
  }
}

.sds-button--menu {
  color: color("secondary-dark") !important;

  usa-icon {
    font-size: 1.5rem;
    vertical-align: -0.4rem
  }

  &.usa-button {
    line-height: 1.5;
    font-size: 17px;
    border-color: color("secondary-dark");
    background-color: white !important;
    padding: 0.5rem !important;
    min-width: 6.25rem !important;

    &:visited {
      color: color("secondary-dark") !important;
      box-shadow: none;
    }

    &.usa-button--hover,
    &:not(.usa-button--disabled):hover {
      background-color: color("secondary-dark") !important;
      color: white !important;
      border-color: color("secondary-dark") !important;
      box-shadow: none;
    }

    &.usa-button--active,
    &:not(.usa-button--disabled):active {
      background-color: color("secondary-dark") !important;
      color: white;
      border-color: color("secondary-dark") !important;
      box-shadow: none;
    }
  }

  &.usa-button--disabled {
    box-shadow: none;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: color("base") !important;
    background-color: white !important;
    color: color("base") !important;
    cursor: unset !important;
  }
}

@media only screen and (min-width: 400px) and (max-width:800px) {
  .sds-button--menu {
    padding: 1em 0.5em;

    span {
      display: none !important;
    }
  }
}