@landing-portal-color: @global-primary-background;
@landing-inverse-color: @global-inverse-color;
@landing-z-index: @global-z-index - 20;

@landing-header-height: @global-header-height;
@landing-sidebar-height: calc(100vh - @landing-header-height);

@landing-left-sidebar-width: 100px;
@landing-left-sidebar-background: @global-inverse-color;
@landing-left-sidebar-border-width: @global-border-width;
@landing-left-sidebar-border: @global-border;

@landing-right-sidebar-min-width: 360px;
@landing-right-sidebar-background: @table-color;

@landing-action-button-background: @global-background;
@landing-action-button-border-width: @global-border-width;
@landing-action-button-border: transparent;
@landing-action-button-border-radius: @global-small-border-radius;
@landing-action-button-hover-background: @global-background;

@landing-action-button-portal-background: @landing-portal-color;
@landing-action-button-portal-color: @landing-inverse-color;
@landing-action-button-portal-border: @landing-action-button-portal-background;
@landing-action-button-portal-hover-background: @global-background;
@landing-action-button-portal-hover-color: @landing-portal-color;

@landing-action-button-orcid-color: @orcid-color;
@landing-action-button-orcid-border: @orcid-color;
@landing-action-button-orcid-disabled-color: @global-muted-color;
@landing-action-button-orcid-disabled-border: @global-muted-color;

@landing-section-min-height: 60vh;
@landing-section-border-width: 3px;
@landing-section-separator: fade(@landing-portal-color, @global-opacity);

@landing-download-from-background: @global-background;
@landing-download-from-border-width: @global-border-width;
@landing-download-from-border: @global-border;
@landing-download-from-border-radius: @global-border-radius;

@landing-card-tab-border-radius: @global-border-radius;
@landing-card-tab-border-width: 5px;

.landing {

  #landing-left-sidebar {
    width: @landing-left-sidebar-width;
    background: @landing-left-sidebar-background;
    border-right: @landing-left-sidebar-border-width solid @landing-left-sidebar-border;

    & > .uk-sticky {
      height: @landing-sidebar-height;
    }
  }

  #landing-right-sidebar {
    min-width: @landing-right-sidebar-min-width;
    background: @landing-right-sidebar-background;

    & > .uk-sticky {
      height: @landing-sidebar-height;
    }
  }

  #landing-right-sidebar-switcher {
    top: 50vh !important;
  }

  #main-tabs-div {
    z-index: @landing-z-index - 2;
  }

  #graph_and_feedback {
    z-index: @landing-z-index - 1;
  }

  #landing-sections {
    .landing-section {
      padding-bottom: 80px;

      &:not(:first-child) {
        margin-top: 80px;
      }

      &:not(.landing-section-height-auto) {
        min-height: @landing-section-min-height;
      }

      &:not(:last-child) {
        border-bottom: @landing-section-border-width solid @landing-section-separator;
      }
    }
  }

  .landing-action-button {
    &:extend(.uk-icon-button-small);
    background-color: @landing-action-button-background;
    border: @landing-action-button-border-width solid @landing-action-button-border;
    border-radius: @landing-action-button-border-radius;

    &:hover {
      background: @landing-action-button-hover-background;
      border: transparent;
    }

    &.landing-action-button-portal {
      background-color: @landing-action-button-portal-background;
      color: @landing-action-button-portal-color;
      border-color: @landing-action-button-portal-border;

      &:hover {
        background: @landing-action-button-portal-hover-background;
        color: @landing-action-button-portal-hover-color;
      }
    }

    &.landing-action-button-orcid {
      color: @landing-action-button-orcid-color;
      border-color: @landing-action-button-orcid-border;

      &.uk-disabled {
        color: @landing-action-button-orcid-disabled-color;
        border-color: @landing-action-button-orcid-disabled-border;
      }
    }
  }

  .uk-dropdown {
    z-index: @landing-z-index + 1;
  }

  .download-from > * {
    background-color: @landing-download-from-background;
    border: @landing-download-from-border-width solid @landing-download-from-border;
    border-radius: @landing-download-from-border-radius;
  }

  .card-tab {
    border-radius: @landing-card-tab-border-radius;
    border-left: @landing-card-tab-border-width solid @landing-section-separator;
  }
}