@import '../../button/style/mixins.scss';
@import '../../popup/style/component.scss';

@include b(actionsheet) {
  margin: var(--actionsheet-margin);

  @include m(spacing) {
    margin: 0 r(10) r(10);
  }

  @include m(radius) {
    @include e(actions, cancel) {
      border-radius: var(--radius-md);
    }
  }

  @include e(actions, cancel) {
    overflow: hidden;
    background-color: var(--actionsheet-background);
  }

  @include e(cancel) {
    margin-top: r(7);
  }

  @include e(item) {
    display: block;
    height: var(--actionsheet-item-height);
    line-height: var(--actionsheet-item-height);
    font-size: var(--actionsheet-item-font-size);
    @include button-base();

    @include m(primary) {
      color: var(--theme-primary);
    }

    @include m(success) {
      color: var(--theme-success);
    }

    @include m(warning) {
      color: var(--theme-warning);
    }

    @include m(error) {
      color: var(--theme-error);
    }

    &:active {
      background-color: var(--background-active);
    }

    &:not(:first-of-type) {
      @include onepx(top);
    }
  }
}