
// @optional ./native.scss
// @require core/reset/reset.scss
// @require core/widget/widget.scss
// @require widgets/icon/icon.scss

//TODO: Add support for non-affixed select's popover

/* SELECT */

.select {

  @extend %widget;
  cursor: pointer;
  position: relative;

  /* LABEL */

  &.label {
    text-align: left;
  }

  /* SELECT */

  select {

    @include fill ();
    @include fill-absolute ();
    appearance: none;
    cursor: pointer;
    margin: 0 !important;
    opacity: 0;
    border: 0;
    border-radius: inherit;
    z-index: $select-z-index !important;

    /* BORDERED */

    //FIXME: Not stretching properly, at maximum it reached 100% width and height

    // .bordered > & {
    //   @include absolute ( - $border-width );
    // }

    /* LABEL */

    + label {

      padding-right: ( 1em * $icon-scale-factor ) + $select-inner-gutter;
      min-height: 1em * $icon-scale-factor;
      min-width: 1em * $icon-scale-factor;
      flex-grow: 1;
      cursor: pointer;

      /* EMPTY */

      &:empty {
        padding-right: 0;
      }

      /* AFTER */

      &:after {
        @extend %icon-base;
        position: absolute;
        right: 0;
        top: 0; //Ensuring it won't wrap
        content: $select-icon-closed;
      }

      /* CUSTOM AFTER */

      &[data-icon]:after {
        content: attr(data-icon);
      }

      &[data-icon-closed]:after {
        content: attr(data-icon-closed);
      }

    }

  }

  /* OPEN */

  &.open {

    /* LABEL */

    select + label {

      /* AFTER */

      &:after {
        content: $select-icon-open;
      }

      /* CUSTOM AFTER */

      &[data-icon]:after {
        content: attr(data-icon);
      }

      &[data-icon-open]:after {
        content: attr(data-icon-open);
      }

    }

  }

}
