/*!
 * Copyright (C) 2023 StApps
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */
@import 'src/theme/util/_mixins.scss';

stapps-origin-detail {
  // css hack to make the element stick to the bottom of the scroll container even
  // when the content is not filling it
  position: sticky;
  top: 100vh;
}

.content-switch {
  // prevent a scrollbar from appearing in some cases
  margin-block-start: -1px !important;
  flex: 1;
  display: flex;
  padding: 0 var(--spacing-md);

  ::ng-deep > * {
    display: flex;
    height: fit-content;
    width: 100%;
    flex-direction: column;
    @include border-radius-in-parallax(var(--border-radius-default));
    overflow: hidden;
    position: relative;
    margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
    margin-block-end: var(--spacing-xl);
    background-color: var(--ion-color-primary-contrast);
    @include content-padding();

    & > ion-thumbnail {
      background: var(--ion-color-primary);
    }

    // Firefox doesn't support this yet...
    @supports selector(:has(*)) {
      & > .expand-when-space,
      &:has(> .expand-when-space) {
        height: unset;
        flex: 1;
      }
    }
  }
}

:host ::ng-deep {
  ion-slides.work-locations {
    ion-slide {
      display: block;
      text-align: left;
    }
  }
  ion-card {
    margin: 0;
    box-shadow: none;
    ion-card-content {
      h1 {
        margin: 0;
      }
      padding-bottom: 8px;
    }
    ion-card-header {
      color: var(--ion-color-dark);
      padding-top: 8px;
      padding-bottom: 4px;
      font-weight: bold;
    }
    ion-grid,
    ion-col {
      padding-inline-start: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  ion-grid,
  ion-col {
    padding-inline-start: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}