$picker-background : rgb(251, 252, 253);
$picker-border-color : rgb(213, 213, 213);

$picker-height : 33px;
$arrow-margin : 13px;

.hidden {
  display : none;
}

.period-picker {
  //JUST FOR DEV
  margin-left : 404px;
  margin-top  : 102px;
  //DEV
  position    : relative;
  background  : $picker-background;
  width       : 264px;
  height      : $picker-height;
  border      : 1px solid $picker-border-color;
  //cursor      : pointer;

  &__arrow, &__date {
    display  : inline-block;
    height   : $picker-height;

    position : absolute;
    top      : 0;
  }

  &__date {
    font-size    : 12px;
    color        : darkgray;
    width        : 198px;
    left         : 33px;
    border-left  : 1px solid $picker-border-color;
    border-right : 1px solid $picker-border-color;
    box-sizing   : border-box;
    padding      : 9px 0 0 9px;

    & > .fa-calendar-o {
      font-size : 14px;
    }
    &__text {
      color          : #767676;
      padding-left   : 6px;
      text-transform : uppercase;
      font-size      : 12px;
      letter-spacing : 0.3px;
    }
  }

  &__arrow {
    position  : absolute;
    width     : 34px;

    font-size : 18px;

    & > .fa-caret-left, & > .fa-caret-right {
      color    : #939393;
      position : absolute;
      top      : 8px;
    }

    &--left {
      left : 0;

      & > .fa-caret-left {
        left : $arrow-margin;
      }
    }

    &--right {
      right : 0;

      & > .fa-caret-right {
        right : $arrow-margin;
      }
    }
  }
}