// The dropdown wrapper (div)
.elzar-status {
  // We remove the margin from the dropdown button to make the list append to it
  // So we apply it here for the button to have margins when closed
  margin-bottom: $button-margin;
  position: relative;
}

.elzar-btn_status {
  background-color: $very-light-grey;
  border-radius: 0;
  height: $status-height;
  margin-bottom: 0;
  padding: 0;
  width: $status-width;

  @include media(min-width $breakpoint-a) {
    width: $status-bigger-width;
  }

  &:hover {
    background-color: rgba($nobel, 0.90);
  }

  &:focus {
    background-color: $nobel;
  }
}

// The status button menu (ul)
.elzar-status_list {
  background-clip: padding-box;
  background-color: $white;
  border: 1px solid $gainsboro;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  font-size: $base-font-size;
  list-style: none;
  margin: 0; // override default ul
  min-width: rem(47);
  padding: rem(5) 0;
  position: absolute;
  right: 0;
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  z-index: 100;

  @include media(min-width $breakpoint-a) {
    font-size: $font-medium-size;
   }

  // Show the menu
  .elzar-open & {
    display: block;
    // Remove the outline when :focus is triggered
    a {
      outline: 0;
    }
  }
}

// Links, buttons, and more within the dropdown menu
//
// `<button>`-specific styles are denoted with `// for <button>s`
.elzar-status_item {
  background: none; // For `<button>`s
  border: 0; // For `<button>`s
  clear: both;
  display: block;
  font-weight: normal;
  line-height: $base-line-height;
  padding: $status-list-padding;
  text-align: inherit; // For `<button>`s
  white-space: nowrap; // prevent links from randomly breaking onto new lines
  width: 100%; // For `<button>`s

  &:hover {
    background: $white-smoke;
    cursor: pointer;
  }
}

.elzar-status_item--selected {
  opacity: 0.4;
}

.elzar-status_link {
  color: $mattherhorn;

  &:hover {
    color: $mattherhorn;
  }
}

.elzar-status_icon {
  .elzar-btn_status & {
    height: rem(30);
    stroke: $white;
  }
}

.elzar-arrow_icon {

  .elzar-btn_status & {
    float: right;
    //only way to be aligned – maybe we should have a better way?
    margin: rem(5) rem(16) 0 0;
    stroke: $white;

    @include media(min-width $breakpoint-a) {
      float: right;
      margin: rem(8) 0;
      padding-right: rem(7);
    }
  }
}

//Diferente states:
.elzar-status--active {
  background-color: $shamrock;

  &:hover {
    background-color: rgba($niagara, 0.80);
  }

  &:focus {
    background-color: $niagara;
  }
}

.elzar-status--cancelled {
  background-color: $amaranth;

  &:hover {
    background-color: rgba($cardinal, 0.80);
  }

  &:focus {
    background-color: $cardinal;
  }
}

.elzar-status--no-show {
  background-color: $dark-orange;

  &:hover {
    background-color: rgba($golden-tainoi, 0.80);
  }

  &:focus {
    background-color: $golden-tainoi;
  }
}