// Dropbutton
//------------------------------------------------------------------------------

.dropbutton-widget {
  font-size: 0.875rem;

  .open > & {
    background: #fff;
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow-sm;
  }

  .js .dropbutton-multiple & {
    padding-right: 2.188rem;
  }
}

// Override to fix widget within table cells.
.js td .dropbutton-multiple {
  display: inline-block;
  margin-right: 2.188rem;
}


// Dropbutton List
//------------------------------------------------------------------------------

.js .dropbutton-widget .dropbutton {
  // Override to allow full width .sectionary-action.
  overflow: unset;
}


// Dropbutton Actions
//------------------------------------------------------------------------------

.dropbutton-action {
  a {
    background: $gray-200;
    border-bottom-left-radius: $border-radius-lg;
    border-right: solid 2px #fff;
    border-top-left-radius: $border-radius-lg;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.1;
    padding: 0.625rem 1rem;
    text-decoration: none;
    white-space: nowrap;

    &:hover,
    &:focus {
      background: var(--ak-accent-color-dark);
      color: var(--ak-accent-color-light);
    }

    .open & {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &.secondary-action {
    a {
      background: #fff;
      border-radius: 0;
      border-right: 0;
      line-height: 1;
      padding-bottom: 0.563rem;
      padding-top: 0.563rem;
      position: relative;

      // Fake a fulll width list item, so the hover affect can appear to be 100%
      // width. By default li.dropbutton-toggle appears at the right and has the
      // the appearance of a full height button at the right of the whole list.
      &:after {
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: -2.188rem;
        top: 0;
        width: 2.188rem;
        z-index: 101;
      }

      &:hover,
      &:hover::after,
      &:focus,
      &:focus::after {
        background: var(--ak-accent-color-dark);
        color: var(--ak-accent-color-light);
      }
    }
  }

  &:last-child a {
    border-bottom-left-radius: $border-radius-lg;

    &::after {
      border-bottom-right-radius: $border-radius-lg;
    }
  }
}


// Dropbutton Toggle (wrapper for arrow)
//------------------------------------------------------------------------------

.dropbutton-toggle {

  .open & {
    bottom: auto;
  }

  button {
    align-items: center;
    background: $gray-200;
    border-bottom-right-radius: $border-radius-lg;
    border-top-right-radius: $border-radius-lg;
    display: flex;
    justify-content: center;

    &:hover {
      background-color: var(--ak-accent-color-dark);
      color: var(--ak-accent-color-light);
    }

    .open & {
      background: $gray-200;
      border-bottom-right-radius: 0;

      &:hover {
        background-color: var(--ak-accent-color-dark);
        color: var(--ak-accent-color-light);
      }
    }
  }
}

li.dropbutton-toggle {
  width: 2.188rem;

  .open & {
    height: 2.188rem;
  }
}


// Dropbutton Arrow / Icon
//------------------------------------------------------------------------------

.dropbutton-arrow {
  background: $dropbutton-icon-color;
  border: 0;
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  mask: $dropbutton-icon no-repeat 50% 60%;
  mask-size: 13px auto;
  right: 0;
  top: 0;
  width: 100%;

  &:hover,
  .dropbutton-toggle button:hover &,
  .open .dropbutton-toggle button:hover & {
    background: $dropbutton-icon-hover-color;
  }

  .open & {
    background: $dropbutton-icon-color;
    mask-position: 50% 90%;
    transform: rotate(-180deg);
  }
}
