//----------------------------------------------------
// Staffroller - SCSS
//----------------------------------------------------

//----------------------------------------------------
// / Import - External Configs
//----------------------------------------------------

@import "sass-dashi/src/scss/_dashi.scss";

//----------------------------------------------------
// / Variables
//----------------------------------------------------

$staffroller-mobile-all-size: 100% !default;
$staffroller-fablet-all-size: 100% !default;
$staffroller-tablet-all-size: 110% !default;
$staffroller-desktop-all-size: 110% !default;
$staffroller-wide-all-size: 110% !default;

$staffroller-modal-z-index: 1000 !default;
$staffroller-modal-transition: 0.32s !default;
$staffroller-modal-fade-transition: 0.3s cubic-bezier(0, 0, 0.2, 1) !default;

$staffroller-overlay-background: rgba(0, 0, 0, 0.9) !default;
$staffroller-global-color: #fff !default;

$staffroller-close-size: 3.75em !default;
$staffroller-close-border-width: 2px !default;
$staffroller-close-border-radius: 1px !default;
$staffroller-close-color: $staffroller-global-color !default;
$staffroller-close-opacity: 0.5 !default;

$staffroller-container-max-width: 100% !default;

$staffroller-title-padding: 1.25em !default;
$staffroller-title-color: $staffroller-global-color !default;
$staffroller-title-font-size: 1.25em !default;
$staffroller-title-font-weight: 700 !default;
$staffroller-title-text-align: center !default;

$staffroller-row-dt-width: 50% !default;
$staffroller-row-dt-padding: 0.75em 0.5em !default;
$staffroller-row-dd-width: 50% !default;
$staffroller-row-dd-padding: 0.75em 0.5em !default;

$staffroller-role-color: $staffroller-global-color !default;
$staffroller-role-font-size: 1em !default;
$staffroller-role-font-weight: 400 !default;
$staffroller-role-text-align: right !default;
$staffroller-role-opacity: 1 !default;

$staffroller-members-space: 0.5em !default;
$staffroller-member-space: 0.25em !default;

$staffroller-image-size: 1.5em !default;
$staffroller-image-radius: 999em !default;

$staffroller-name-color: $staffroller-global-color !default;
$staffroller-name-font-size: 1em !default;
$staffroller-name-font-weight: 700 !default;
$staffroller-name-text-align: left !default;

$staffroller-link-color: inherit !default;
$staffroller-link-hover-color: inherit !default;
$staffroller-link-visited-color: inherit !default;
$staffroller-link-text-decoration: none !default;
$staffroller-link-hover-text-decoration: underline !default;

//----------------------------------------------------
// / Components
//----------------------------------------------------

.staffroller-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: $staffroller-mobile-all-size;
  z-index: $staffroller-modal-z-index;
  transition: $staffroller-modal-transition;
  @include fablet {
    font-size: $staffroller-fablet-all-size;
  }
  @include tablet {
    font-size: $staffroller-tablet-all-size;
  }
  @include desktop {
    font-size: $staffroller-desktop-all-size;
  }
  @include wide {
    font-size: $staffroller-wide-all-size;
  }
  &[aria-hidden="true"] {
    visibility: hidden;
    .is-fade {
      opacity: 0;
    }
  }
  .is-fade {
    transition: 0.3s cubic-bezier(0, 0, 0.2, 1);
  }
}

.staffroller-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $staffroller-overlay-background;
  z-index: 1;
}

.staffroller-close {
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  width: $staffroller-close-size;
  height: $staffroller-close-size;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  opacity: $staffroller-close-opacity;
  z-index: $staffroller-modal-z-index + 3;
  appearance: none;
  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: $staffroller-close-size / 2;
    height: $staffroller-close-border-width;
    background: $staffroller-close-color;
    border-radius: $staffroller-close-border-radius;
  }
  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

.staffroller-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}

.staffroller-container {
  width: 100%;
  max-width: $staffroller-container-max-width;
  max-height: 100vh;
  padding: 48px 16px 160px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  &:after {
    content: "";
    display: block;
    width: 100%;
    @include safe-area-padding(bottom);
  }
}

.staffroller-title {
  padding: $staffroller-title-padding;
  color: $staffroller-title-color;
  font-size: $staffroller-title-font-size;
  font-weight: $staffroller-title-font-weight;
  text-align: $staffroller-title-text-align;
}

.staffroller-content {
}

.staffroller-row {
  display: flex;
  flex-wrap: wrap;
  > dt {
    flex: 0 0 $staffroller-row-dt-width;
    padding: $staffroller-row-dt-padding;
  }
  > dd {
    flex: 0 0 $staffroller-row-dd-width;
    padding: $staffroller-row-dd-padding;
  }
}

.staffroller-roles {
}

.staffroller-role {
  color: $staffroller-role-color;
  font-size: $staffroller-role-font-size;
  font-weight: $staffroller-role-font-weight;
  text-align: $staffroller-role-text-align;
  opacity: $staffroller-role-opacity;
}

.staffroller-members {
  > .staffroller-member:not(:last-child) {
    margin-bottom: $staffroller-members-space;
  }
}

.staffroller-member {
  display: flex;
  align-items: center;
}

.staffroller-image {
  flex: none;
  display: block;
  width: $staffroller-image-size;
  margin-right: $staffroller-member-space;
  border-radius: $staffroller-image-radius;
}

.staffroller-name {
  flex: 1 0 0%;
  color: $staffroller-name-color;
  font-size: $staffroller-name-font-size;
  font-weight: $staffroller-name-font-weight;
  text-align: $staffroller-name-text-align;
}

.staffroller-link {
  cursor: pointer;
  color: $staffroller-link-color;
  text-decoration: $staffroller-link-text-decoration;
  &:hover {
    color: $staffroller-link-hover-color;
    text-decoration: $staffroller-link-hover-text-decoration;
  }
  &:visited {
    color: $staffroller-link-visited-color;
  }
}