@import '../../scss/variables.scss';
@import '../../scss/mixins.scss';

// #variables
$s-share-sheet-border-radius:          $s-border-radius-xl !default;
$s-share-sheet-bg:                     $s-white !default;

$s-share-sheet-header-padding:         14px !default;
$s-share-sheet-header-border-color:    $s-gray-200;

$s-share-sheet-title-font-size:        $s-font-size-lg !default;

$s-share-sheet-description-margin-top: 8px !default;
$s-share-sheet-description-font-size:  $s-font-size !default;
$s-share-sheet-description-color:      $s-muted !default;


$s-share-sheet-row-border-color:       $s-gray-200 !default;
$s-share-sheet-row-padding-y:          16px !default;
$s-share-sheet-row-padding-x:          8px !default;

$s-share-sheet-item-active-opacity:    $s-active-opacity !default;

$s-share-sheet-item-icon-margin-x:     16px !default;

$s-share-sheet-item-title-margin-top:  8px !default;
$s-share-sheet-item-title-padding-x:   4px !default;
$s-share-sheet-item-title-font-size:   $s-font-size !default;
$s-share-sheet-item-title-color:       $s-muted !default;

$s-share-sheet-item-label-margin-top:  0 !default;
$s-share-sheet-item-label-padding-x:   4px !default;
$s-share-sheet-item-label-font-size:   $s-font-size-sm !default;
$s-share-sheet-item-label-color:       $s-weak !default;

$s-share-sheet-gap-bg:                 $s-bg-gap !default;
$s-share-sheet-gap-height:             8px !default;

$s-share-sheet-cancel-font-size:       $s-font-size !default;
$s-share-sheet-cancel-padding:         14px !default;
$s-share-sheet-cancel-bg:              $s-white !default;
$s-share-sheet-cancel-active-bg:       $s-bg-active !default;
// #endvariables

.s-share-sheet {
  border-top-left-radius: $s-share-sheet-border-radius;
  border-top-right-radius: $s-share-sheet-border-radius;
  background-color: $s-share-sheet-bg;
}
.s-share-sheet-header {
  position: relative;
  padding: $s-share-sheet-header-padding;
  
  @include border-bottom($s-share-sheet-header-border-color);

  @at-root {
    .s-share-sheet-title {
      font-size: $s-share-sheet-title-font-size;
      text-align: center;
    }
    .s-share-sheet-description {
      font-size: $s-share-sheet-description-font-size;
      text-align: center;
      color: $s-share-sheet-description-color;
  
      .s-share-sheet-title ~ & {
        margin-top: $s-share-sheet-description-margin-top;
      }
    }
  }
}

.s-share-sheet-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: $s-share-sheet-row-padding-y $s-share-sheet-row-padding-x;
  overflow-x: auto;
  overflow-y: hidden;
  &::-webkit-scrollbar {
    height: 0;
  }
  &:not(:first-child) {
    @include border-top($s-share-sheet-row-border-color);
  }
  .s-share-sheet.s-share-sheet-headless &:first-child {
    border-top-left-radius: $s-share-sheet-border-radius;
    border-top-right-radius: $s-share-sheet-border-radius;
  }
}

.s-share-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  &:active {
    opacity: $s-share-sheet-item-active-opacity;
  }
  
  @at-root {
    .s-share-sheet-item-icon {
      display: flex;
      margin: 0 $s-share-sheet-item-icon-margin-x;
    }
    .s-share-sheet-item-title {
      margin-top: $s-share-sheet-item-title-margin-top;
      padding: 0 $s-share-sheet-item-title-padding-x;
      font-size: $s-share-sheet-item-title-font-size;
      color: $s-share-sheet-item-title-color;
    }
    .s-share-sheet-item-label {
      margin-top: $s-share-sheet-item-label-margin-top;
      padding: 0 $s-share-sheet-item-label-padding-x;
      font-size: $s-share-sheet-item-label-font-size;
      color: $s-share-sheet-item-label-color;
    }
  }
}

.s-share-sheet-gap {
  height: $s-share-sheet-gap-height;
  background-color: $s-share-sheet-gap-bg;
}

.s-share-sheet-cancel {
  font-size: $s-share-sheet-cancel-font-size;
  padding: $s-share-sheet-cancel-padding;
  text-align: center;
  cursor: pointer;
  background-color: $s-share-sheet-cancel-bg;
  &:active {
    background-color: $s-share-sheet-cancel-active-bg;
  }
}