/* ---------------------------------
-----  dimension variables --------
---------------------------------- */
/* ------  standard elements padding & margin  ------- */
/* spacing */
/**
**  Official Font sizes
------------------------------- */
/**
** Line-heights
------------------------------- */
/*
  Mixin to progressively-enhance :focus-visible, keeping :focus where not supported
  Add an arbitrary list of selectors into the arguments, and the styling in the block.
  I you pass no selectors to the mixin the parent ("ampersand") operator is used instead.

  There are two mixins:
  - focus-visible: a generic focus-visible, giving you "slots" to decide what to render for :focus, :focus reset, and :focus-visible
  - focus-visible-outline: a focus-visible, which only resets the outline. If you don't need more custom resets, use this one!

  Use focus-visible:
  The key thing here is checking which slot is being rendered.
  For example, you can reset box-shadow here, or anything else.

  @include focus-visible using ($slot) {
      @if $slot == focus {
          outline: 2px solid transparent;
          box-shadow: 0 0 0 4px blue;
      }
      @if $slot == focusReset {
          box-shadow: none;
      }
      @if $slot == focusVisible {
          box-shadow: 0 0 0 4px blue;
      }
  }

  Use focus-visible-outline:
  @include focus-visible-outline("button", "a[href]") {
      outline: 2px solid blue;
  }

  Resulting CSS (compressed):

  button:focus,
  a[href]:focus {
      outline: 2px solid blue;
  }

  button:focus:not(:focus-visible),
  a[href]:focus:not(:focus-visible) {
      outline: none;
  }
  button:focus-visible,
  a[href]:focus-visible {
      outline: 2px solid blue;
  }
*/
/* stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type */
.ux-comparison-table {
  position: relative;
}
.ux-comparison-table--content th.first {
  display: none;
}
.ux-comparison-table--content .list-styled {
  margin: 0;
}
.ux-comparison-table--content thead tr {
  align-items: center;
}
.ux-comparison-table--content .cat {
  background-color: #e7ecf0;
}
@media only screen and (max-width: 550px) {
  .ux-comparison-table--content td {
    padding: 15px !important;
    width: 250px;
  }
}
@media only screen and (max-width: 550px) {
  .ux-comparison-table .sub-cat {
    display: flex;
  }
}
.ux-comparison-table--data .sub-cat {
  flex-wrap: wrap;
}
.ux-comparison-table--data .sub-cat .first {
  background: #fff;
  flex: 0 0 100%;
  left: 1px;
  pointer-events: none;
  position: absolute;
  width: calc(100% - 2px);
}
@media only screen and (min-width: 550px) {
  .ux-comparison-table--data .sub-cat .first {
    border-right: 1px solid #9ea9b0;
    left: 0;
    pointer-events: all;
    position: relative;
    width: auto;
  }
}
.ux-comparison-table--data .sub-cat td:not(.first) {
  flex: 1;
  margin-top: 60px;
  padding: 26px 30px;
}
.ux-comparison-table--data .sub-cat td:not(.first) + td {
  border-left: 1px solid #cbcbcb;
}
.ux-comparison-table--data .cat {
  background-color: #e7ecf0 !important;
  border-bottom: 1px solid #cbcbcb;
  position: relative;
}
@media only screen and (max-width: 550px) {
  .ux-comparison-table--data .cat {
    display: flex;
    width: auto;
  }
}
.ux-comparison-table--data .cat ux-icon[name=chevron-right] {
  left: calc(100vw - 40px - 2rem);
  position: absolute;
  top: 50%;
}
.ux-comparison-table--data .cat.opened .first ux-icon[name=chevron-right] {
  left: calc(100vw - 40px - 2rem);
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateY(6px) rotate(-90deg);
}
.ux-comparison-table--data .cat .first {
  border: 0;
  left: 0;
  position: sticky;
}
.ux-comparison-table--data .cat .first ux-icon[name=chevron-right] {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) translateY(-5px) rotate(90deg);
}
@media only screen and (min-width: 550px) {
  .ux-comparison-table--data .cat .first {
    text-align: center;
  }
  .ux-comparison-table--data .cat .first ux-icon {
    display: none;
  }
  .ux-comparison-table--data .cat .first span {
    position: static;
  }
}
.ux-comparison-table--data .container {
  overflow: scroll;
}
@media only screen and (min-width: 768px) {
  .ux-comparison-table--data .container {
    overflow: initial;
  }
}
.ux-comparison-table--data tbody tr {
  background-color: #fff;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
}
@media only screen and (min-width: 550px) {
  .ux-comparison-table--data tbody tr {
    display: table-row;
  }
}
.ux-comparison-table--data tbody tr th:first-child,
.ux-comparison-table--data tbody tr td:first-child {
  border-left: 0 solid;
}
.ux-comparison-table--data tbody tr th:last-child,
.ux-comparison-table--data tbody tr td:last-child {
  border-right: 0 solid;
}
@media only screen and (max-width: 550px) {
  .ux-comparison-table--data td,
  .ux-comparison-table--data th {
    white-space: nowrap;
  }
}
.ux-comparison-table .container {
  border-left: 1px solid #cbcbcb;
  border-right: 1px solid #cbcbcb;
}
.ux-comparison-table table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  width: 100%;
}
@media only screen and (min-width: 550px) {
  .ux-comparison-table table {
    table-layout: fixed;
  }
}
.ux-comparison-table td,
.ux-comparison-table th {
  border-bottom: 1px solid #cbcbcb;
  min-height: 60px;
  padding: 16px 30px;
  vertical-align: middle;
  white-space: normal;
}
.ux-comparison-table td + th,
.ux-comparison-table th + th {
  border-left: 1px solid #cbcbcb;
}
@media only screen and (max-width: 550px) {
  .ux-comparison-table th.first {
    display: none;
  }
  .ux-comparison-table th {
    flex: 1;
  }
  .ux-comparison-table tr[data-info] {
    display: none;
  }
  .ux-comparison-table tr[data-info].opened {
    display: flex;
  }
  .ux-comparison-table tr[data-target] * {
    pointer-events: none;
  }
  .ux-comparison-table tr[data-target].opened ux-icon {
    transform: translateY(-50%) translateY(5px) rotate(270deg);
  }
}
.ux-comparison-table--fixed-column-width td {
  padding: 15px !important;
  width: 250px;
}
.ux-comparison-table--fixed-column-width .sub-cat {
  display: flex;
}
.ux-comparison-table--fixed-column-width th.first {
  display: none;
}
.ux-comparison-table--fixed-column-width th {
  flex: 1;
}
.ux-comparison-table--fixed-column-width tr[data-info] {
  display: none;
}
.ux-comparison-table--fixed-column-width tr[data-info].opened {
  display: flex;
}
.ux-comparison-table--fixed-column-width table {
  table-layout: auto;
}
.ux-comparison-table .ux-comparison-table---td-visible {
  display: block;
}
.ux-comparison-table--nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ux-comparison-table__icon-text {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
}
.ux-comparison-table__status-icon {
  font-size: 23px;
  margin-right: 8px;
}
.ux-comparison-table th {
  font-family: Frutiger-Bold, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  font-weight: 400;
  background-color: #c3cfd6;
  font-size: 13px;
  text-transform: uppercase;
}
.ux-comparison-table thead tr {
  background-color: #c3cfd6;
  display: flex;
}
@media only screen and (min-width: 550px) {
  .ux-comparison-table thead tr {
    display: table-row;
  }
}
.ux-comparison-table thead tr th {
  border-right: 1px solid #9ea9b0;
}
.ux-comparison-table thead tr th:last-child {
  border-right: 0;
}
.ux-comparison-table--heading-cell {
  font-family: Frutiger-Bold, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  font-weight: 400;
  background-color: rgba(195, 207, 214, 0.5);
  font-size: 13px;
  text-align: center;
  text-transform: uppercase;
}
@media only screen and (max-width: 550px) {
  .ux-comparison-table--heading-cell {
    text-align: start;
  }
}
.ux-comparison-table__inner {
  height: auto;
  overflow-x: auto;
}
.ux-comparison-table__inner::before, .ux-comparison-table__inner::after {
  content: "";
  height: calc(100% + 1px);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.5s ease;
  width: 50px;
  z-index: 1;
}
.ux-comparison-table__inner::before {
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0, rgba(0, 0, 0, 0.2) 100%);
}
.ux-comparison-table__inner::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0, #fff 100%);
  right: 0;
}
.ux-comparison-table--non-fixed-column .ux-comparison-table__inner::before {
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0, #fff 100%);
}
.ux-comparison-table__fixed-link {
  display: none;
  padding: 9px 2px 9px 8px;
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ux-comparison-table--is-fixed table {
  min-width: auto;
}
.ux-comparison-table--is-fixed .ux-table__fixed-link {
  display: inline-block;
}

/* stylelint-enable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type */