/*
	Abstracts are helpers, variables and functions
	for scss compliation.
*/
/*
	@TODO: Add to theme: new division fix for updated sass package.
*/
/**==================================================================================================================================
BREAKPOINT
@TODO: remove? What is use case?? either use simple global points or write custom line. why does first breakpoint have to be 0?
 ==================================================================================================================================*/
/**==================================================================================================================================
BREAKPOINT ENDS
==================================================================================================================================*/
span.edit-link {
  display: inline-block;
  background-color: yellow;
  font-weight: 700;
  position: fixed;
  left: 0;
  bottom: 3.125rem;
  transform: translateX(-45px);
  transition: all 0.2s;
}

span.edit-link a {
  display: block;
  padding: 0.9375rem;
}

span.edit-link:hover {
  transform: translateX(0);
}

/*
	Variables for compliation
	NB! Colors should be added to base/config file as css root variable.
*/
/**
 * Block section background colors.
 * Include the background options ACF fields group to use these.
 */
/*
 * makes ul/ol as a dropdown select (normaly in mobile)
 * Structure: div > title > list > li > a
*/
/*
	Variables for legacy dc plugins
*/
section.shareholders-chart {
  --text-dark: #282828;
}

section.shareholders-chart.block-section.has-background:not(.has-inner-background-color) {
  padding: calc(var(--spacing-block) / 2) 0;
}

section.shareholders-chart .block-title {
  margin-bottom: 2.5rem;
  font-weight: 300;
}

section.shareholders-chart .shareholders-table-wrapper {
  background-color: var(--color__white, #fff);
  padding: 2.5rem 2.5rem 3.5rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

@media screen and (max-width: 850px) {
  section.shareholders-chart .shareholders-table-wrapper {
    padding: 1.5rem 0.875rem;
  }
}
section.shareholders-chart .shareholders-table {
  width: 100%;
  border-collapse: collapse;
}

section.shareholders-chart .shareholders-table thead tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

section.shareholders-chart .shareholders-table thead tr th {
  padding: 1rem 0.75rem 1.25rem;
  text-align: left;
  color: var(--color__grey);
  font-weight: 300;
}

section.shareholders-chart .shareholders-table thead tr th.text-right {
  text-align: right;
}

section.shareholders-chart .shareholders-table thead tr th.investor-col {
  width: 30%;
}

@media screen and (max-width: 850px) {
  section.shareholders-chart .shareholders-table thead tr th.investor-col {
    width: 36%;
    padding: 1rem 0.75rem 1.25rem 0;
  }
}
section.shareholders-chart .shareholders-table thead tr th.bar-col {
  width: 40%;
}

@media screen and (max-width: 850px) {
  section.shareholders-chart .shareholders-table thead tr th.bar-col {
    width: 24%;
  }
}
section.shareholders-chart .shareholders-table thead tr th.percentage-col {
  width: 15%;
}

@media screen and (max-width: 850px) {
  section.shareholders-chart .shareholders-table thead tr th.percentage-col {
    width: 15%;
  }
}
@media screen and (max-width: 480px) {
  section.shareholders-chart .shareholders-table thead tr th.percentage-col {
    font-size: 0.875rem !important;
  }
}
section.shareholders-chart .shareholders-table thead tr th.shares-col {
  width: 15%;
}

@media screen and (max-width: 850px) {
  section.shareholders-chart .shareholders-table thead tr th.shares-col {
    width: 25%;
    padding: 1rem 0 1.25rem 0;
  }
}
section.shareholders-chart .shareholders-table tbody {
  color: var(--text-dark);
}

section.shareholders-chart .shareholders-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease;
}

section.shareholders-chart .shareholders-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

section.shareholders-chart .shareholders-table tbody tr td {
  padding: 1.25rem 0.75rem;
}

section.shareholders-chart .shareholders-table tbody tr td.text-right {
  text-align: right;
}

section.shareholders-chart .shareholders-table tbody tr td.investor-name {
  font-weight: 400;
}

@media screen and (max-width: 480px) {
  section.shareholders-chart .shareholders-table tbody tr td.investor-name {
    font-size: 0.875rem !important;
    padding: 1.25rem 0.75rem 1.25rem 0;
  }
}
section.shareholders-chart .shareholders-table tbody tr td.bar-cell {
  padding: 0.75rem;
}

section.shareholders-chart .shareholders-table tbody tr td.percentage-value, section.shareholders-chart .shareholders-table tbody tr td.shares-value {
  font-weight: 300;
}

section.shareholders-chart .percentage-bar {
  width: 100%;
  height: 0.5rem;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
  overflow: hidden;
}

section.shareholders-chart .percentage-bar .bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color__brand-copper, #bd8a5e), var(--color__light-copper, #dec4ae));
  border-radius: 0.25rem;
  transition: width 0.8s ease;
}

section.shareholders-chart .shareholders-text {
  color: var(--color__grey);
  margin-top: 2rem;
}

section.shareholders-chart .shareholders-text p {
  margin: 0;
  line-height: 1.6;
}

section.shareholders-chart .shareholders-text p a {
  color: var(--color__blue);
}

section.shareholders-chart .shareholders-error {
  padding: 1.5rem;
  background-color: var(--color-error-bg, #fee);
  border-radius: 0.5rem;
  color: var(--color-error, #cc4b37);
}

@media screen and (max-width: 850px) {
  section.shareholders-chart .shareholders-table thead th {
    font-size: 0.875rem;
    padding: 0.75rem 0.5rem;
  }
  section.shareholders-chart .shareholders-table tbody tr td {
    font-size: 0.875rem;
    padding: 0.75rem 0.5rem;
  }
}
@media screen and (max-width: 850px) and (max-width: 480px) {
  section.shareholders-chart .shareholders-table tbody tr td:last-child {
    padding: 1.25rem 0 1.25rem 0.75rem !important;
  }
}
@media screen and (max-width: 850px) {
  section.shareholders-chart .percentage-bar {
    height: 0.25rem;
  }
}