/*!
 * 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 '../../../../theme/util/mixins';

:host {
  display: contents;
}

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 {
  display: flex;
  flex: 1;

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

  ::ng-deep > * {
    @include border-radius-in-parallax(var(--border-radius-default));
    @include content-padding;

    position: relative;

    overflow: hidden;
    display: flex;
    flex-direction: column;

    width: 100%;
    height: fit-content;
    margin-block: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1) var(--spacing-xl);

    background-color: var(--ion-card-background);

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

    & > .expand-when-space,
    &:has(> .expand-when-space) {
      flex: 1;
      height: unset;
    }
  }
}

:host ::ng-deep {
  ion-grid,
  ion-col {
    padding-top: 0;
    padding-bottom: 0;
    padding-inline-start: 0;
  }

  ion-slides.work-locations {
    ion-slide {
      display: block;
      text-align: left;
    }
  }

  ion-card {
    margin: 0;
    box-shadow: none;

    ion-card-content {
      padding-bottom: 8px;

      h1 {
        margin: 0;
      }
    }

    ion-card-header {
      padding-top: 8px;
      padding-bottom: 4px;
      font-weight: bold;
    }

    ion-grid,
    ion-col {
      padding-top: 0;
      padding-bottom: 0;
      padding-inline-start: 0;
    }
  }
}
