/*
* @component close
* @category styles
*/

@import '../settings/close';
@import '../settings/colors';
@import '../settings/typography';

@import '../tools/mixins/easing';

@import 'node_modules/@collabui/icons/scss/mixins';

@include exports('cui-close') {
  .#{$close__class} {
    float: right;
    font-size: ($font-size-base * 1.5);
    font-weight: bold;
    line-height: 1;
    color: $close__font-color;
    text-shadow: 0 1px 0 $brand-white;

    &:hover,
    &:focus {
      color: $close__font-color--focus;
      text-decoration: none;
      cursor: pointer;
    }
  }
}

button.#{$close__class} {
  min-width: initial;
  padding: 0;
  font-weight: normal;
  cursor: pointer;
  background: transparent;
  border-radius: 0;

  @include easing-transition(all, 150ms, ease);
  &:before {
    @include icon-cancel_28;
    font-family: $icon-font-name;
    vertical-align: middle;
  }
  &:hover {
    color: $close__font-color--hover;
  }
}